Skip to content

Commit da9f2e5

Browse files
stabldevstabldev
authored
refactor: repo contents item and header button variant (#41)
* feat: add content item and skeleton components * refactor: header and button component
1 parent 9484f43 commit da9f2e5

File tree

5 files changed

+71
-34
lines changed

5 files changed

+71
-34
lines changed

‎src/app/(app)/[repo]/_components/content-item.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import datetime from '@/lib/date-time';
2+
import { cn } from '@/lib/utils';
3+
import { Content } from '@/types/github';
4+
import { File, Folder } from 'lucide-react';
5+
6+
interface Props {
7+
username: string | undefined;
8+
repo: string;
9+
content: Content;
10+
}
11+
12+
export default function ContentItem({ username, repo, content }: Props) {
13+
const Icon = content.type === 'dir' ? Folder : File;
14+
15+
return (
16+
<div key={content.path} className="hover:bg-secondary/50 grid grid-cols-5 gap-2 p-3">
17+
<div className="col-span-2 flex items-center gap-2">
18+
<Icon
19+
className={cn(
20+
'text-muted-foreground size-4',
21+
content.type === 'dir' && 'fill-muted-foreground',
22+
)}
23+
/>
24+
<button className="text-sm hover:underline">{content.name}</button>
25+
</div>
26+
<a
27+
href={`https://github.com/${username}/${repo}/commit/${content.lastCommit.sha}`}
28+
target="_blank"
29+
rel="noreferrer noopener"
30+
className="text-muted-foreground col-span-2 text-sm hover:underline"
31+
>
32+
{content.lastCommit.message}
33+
</a>
34+
<span className="text-muted-foreground ml-auto text-sm">
35+
{datetime(content.lastCommit.date).fromNow()}
36+
</span>
37+
</div>
38+
);
39+
}

‎src/app/(app)/[repo]/_components/contents-skeleton.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import { Skeleton } from '@/components/ui/skeleton';
2+
3+
export default function ContentsSkeleton() {
4+
return Array.from({ length: 1 }).map((_, idx) => (
5+
<div key={idx} className="grid grid-cols-5 gap-2 p-3">
6+
<Skeleton className="col-span-2 h-5 w-20" />
7+
<Skeleton className="col-span-2 h-5 w-3/4" />
8+
<Skeleton className="col-span-1 ml-auto h-5 w-15" />
9+
</div>
10+
));
11+
}

‎src/app/(app)/[repo]/_components/repo-contents.tsx

Lines changed: 15 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,15 @@
11
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
22
import { Button } from '@/components/ui/button';
33
import { Input, InputIcon, InputRoot } from '@/components/ui/input';
4-
import { Skeleton } from '@/components/ui/skeleton';
54
import useRepoContents from '@/hooks/use-repo-contents';
65
import { useStableSession } from '@/hooks/use-stable-session';
76
import { getRepoConfig } from '@/lib/api/github';
8-
import datetime from '@/lib/date-time';
97
import { useRepoStore } from '@/stores/repo.store';
10-
import { Folder, Plus, Search } from 'lucide-react';
8+
import { Plus, Search } from 'lucide-react';
119
import { useCallback, useEffect } from 'react';
1210
import { toast } from 'sonner';
11+
import ContentItem from './content-item';
12+
import ContentsSkeleton from './contents-skeleton';
1313

1414
interface Props {
1515
repo: string;
@@ -99,33 +99,18 @@ export default function RepoContents({ repo, setIsConfigDialogOpen }: Props) {
9999
<span className="col-span-2">Last commit message</span>
100100
<span className="ml-auto">Last commit date</span>
101101
</div>
102-
{(isLoading || status === 'loading' || !contents) &&
103-
Array.from({ length: 1 }).map((_, idx) => (
104-
<div key={idx} className="grid grid-cols-5 gap-2 p-3">
105-
<Skeleton className="col-span-2 h-5 w-20" />
106-
<Skeleton className="col-span-2 h-5 w-3/4" />
107-
<Skeleton className="col-span-1 ml-auto h-5 w-15" />
108-
</div>
109-
))}
110-
{contents?.map((content) => (
111-
<div key={content.path} className="hover:bg-secondary/50 grid grid-cols-5 gap-2 p-3">
112-
<div className="col-span-2 flex items-center gap-2">
113-
<Folder className="fill-muted-foreground text-muted-foreground size-4" />
114-
<button className="text-sm hover:underline">{content.name}</button>
115-
</div>
116-
<a
117-
href={`https://github.com/${session?.user?.username}/${repo}/commit/${content.lastCommit.sha}`}
118-
target="_blank"
119-
rel="noreferrer noopener"
120-
className="text-muted-foreground col-span-2 text-sm hover:underline"
121-
>
122-
{content.lastCommit.message}
123-
</a>
124-
<span className="text-muted-foreground ml-auto text-sm">
125-
{datetime(content.lastCommit.date).fromNow()}
126-
</span>
127-
</div>
128-
))}
102+
{isLoading || status === 'loading' || !contents ? (
103+
<ContentsSkeleton />
104+
) : (
105+
contents.map((content) => (
106+
<ContentItem
107+
key={content.path}
108+
username={session?.user?.username}
109+
repo={repo}
110+
content={content}
111+
/>
112+
))
113+
)}
129114
</div>
130115
</div>
131116
);

‎src/app/(app)/_components/header/header.tsx

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import GitLoomIcon from '@/components/icons/gitloom';
44
import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
55
import { Button } from '@/components/ui/button';
66
import { useRepoStore } from '@/stores/repo.store';
7-
import { ChevronsUpDown } from 'lucide-react';
7+
import { ChevronsUpDown, MessageSquareQuote } from 'lucide-react';
88
import { useSession } from 'next-auth/react';
99
import Link from 'next/link';
1010
import { useParams, usePathname } from 'next/navigation';
@@ -27,7 +27,7 @@ export default function Header() {
2727
{!isNewPath && (
2828
<>
2929
<span className="text-muted-foreground/50 text-xl">/</span>
30-
<Button variant={'ghost'} className="gap-2" disabled={!isValid}>
30+
<Button variant={'ghost'} className="gap-2 px-2!" disabled={!isValid}>
3131
<Avatar className="size-5">
3232
<AvatarImage src={session?.user?.image ?? undefined} />
3333
<AvatarFallback>{session?.user?.name?.[0]}</AvatarFallback>
@@ -39,7 +39,9 @@ export default function Header() {
3939
)}
4040
</nav>
4141
<div className="flex items-center gap-4">
42-
<Button variant={'outline'}>Feedback</Button>
42+
<Button variant={'outline'}>
43+
<MessageSquareQuote className="text-muted-foreground size-4" /> Feedback
44+
</Button>
4345
<UserDropdown></UserDropdown>
4446
</div>
4547
</header>

‎src/components/ui/button.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ const buttonVariants = cva(
1313
destructive:
1414
'bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
1515
outline:
16-
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50',
16+
'border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/15 dark:border-input dark:hover:bg-input/30',
1717
secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
1818
ghost: 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50',
1919
link: 'text-primary underline-offset-4 hover:underline',

0 commit comments

Comments
 (0)