Skip to content

Commit cc924f6

Browse files
rajat1saxenarajat1saxena
committed
Added a placeholder
1 parent 84e5b25 commit cc924f6

File tree

1 file changed

+91
-56
lines changed

1 file changed

+91
-56
lines changed

‎apps/web/app/app/[keyid]/files/page.tsx‎

Lines changed: 91 additions & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import {
1515
DoubleArrowLeftIcon,
1616
DoubleArrowRightIcon,
1717
} from "@radix-ui/react-icons";
18+
import { FileText, Youtube } from "lucide-react";
1819

1920
export default async function Media(props: {
2021
params: Promise<{ keyid: string }>;
@@ -48,81 +49,115 @@ export default async function Media(props: {
4849

4950
return (
5051
<>
51-
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 items-start mb-8">
52-
{medias.map((media: any, index: number) => (
53-
<FilePreview key={media.id} media={media} keyid={keyid} />
54-
))}
55-
</div>
56-
<Pagination>
57-
<PaginationContent>
58-
<PaginationItem>
59-
<PaginationLink
60-
href={`/app/${keyid}/files?page=${1}`}
61-
className={`
62-
${
63-
parseInt(page) === 1
64-
? "pointer-events-none text-slate-400"
65-
: ""
66-
}
67-
`}
52+
{medias.length === 0 ? (
53+
<div className="flex flex-col items-center justify-center h-[60vh] gap-4">
54+
<FileText className="h-12 w-12 text-muted-foreground" />
55+
<h3 className="text-lg font-semibold">
56+
Upload your first file
57+
</h3>
58+
<div className="flex gap-2">
59+
<a
60+
href="https://www.youtube.com/watch?v=QrYn82zK4es"
61+
target="_blank"
62+
rel="noopener noreferrer"
63+
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
6864
>
69-
<DoubleArrowLeftIcon className="h-4 w-4" />
70-
</PaginationLink>
71-
</PaginationItem>
72-
<PaginationItem
73-
className={`
65+
<Youtube className="w-4 h-4 mr-2" />
66+
Watch tutorial
67+
</a>
68+
<a
69+
href="https://medialit.cloud/blog/getting-started/MRAoM_zAiywn_d4Lnqm0A"
70+
target="_blank"
71+
rel="noopener noreferrer"
72+
className="inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border border-input bg-background hover:bg-accent hover:text-accent-foreground h-10 px-4 py-2"
73+
>
74+
Open Docs
75+
</a>
76+
</div>
77+
</div>
78+
) : (
79+
<>
80+
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-5 gap-4 items-start mb-8">
81+
{medias.map((media: any, index: number) => (
82+
<FilePreview
83+
key={media.id}
84+
media={media}
85+
keyid={keyid}
86+
/>
87+
))}
88+
</div>
89+
<Pagination>
90+
<PaginationContent>
91+
<PaginationItem>
92+
<PaginationLink
93+
href={`/app/${keyid}/files?page=${1}`}
94+
className={`
95+
${
96+
parseInt(page) === 1
97+
? "pointer-events-none text-slate-400"
98+
: ""
99+
}
100+
`}
101+
>
102+
<DoubleArrowLeftIcon className="h-4 w-4" />
103+
</PaginationLink>
104+
</PaginationItem>
105+
<PaginationItem
106+
className={`
74107
${
75108
parseInt(page) === 1
76109
? "pointer-events-none text-slate-400"
77110
: ""
78111
}
79112
`}
80-
>
81-
<PaginationPrevious
82-
href={
83-
parseInt(page) === 1
84-
? `/app/${keyid}/files?page=${Number(page)}`
85-
: `/app/${keyid}/files?page=${
86-
Number(page) - 1
87-
}`
88-
}
89-
/>
90-
</PaginationItem>
91-
<PaginationItem className="text-sm">
92-
<span className="font-bold">{page}</span> of{" "}
93-
{totalPages} ({medias.length} Files)
94-
</PaginationItem>
95-
<PaginationItem
96-
className={`
113+
>
114+
<PaginationPrevious
115+
href={
116+
parseInt(page) === 1
117+
? `/app/${keyid}/files?page=${Number(page)}`
118+
: `/app/${keyid}/files?page=${
119+
Number(page) - 1
120+
}`
121+
}
122+
/>
123+
</PaginationItem>
124+
<PaginationItem className="text-sm">
125+
<span className="font-bold">{page}</span> of{" "}
126+
{totalPages} ({medias.length} Files)
127+
</PaginationItem>
128+
<PaginationItem
129+
className={`
97130
${
98131
parseInt(page) === totalPages
99132
? "pointer-events-none text-slate-400"
100133
: ""
101134
}
102135
`}
103-
>
104-
<PaginationNext
105-
href={`/app/${keyid}/files?page=${
106-
Number(page) + 1
107-
}`}
108-
/>
109-
</PaginationItem>
110-
<PaginationItem>
111-
<PaginationLink
112-
href={`/app/${keyid}/files?page=${totalPages}`}
113-
className={`
136+
>
137+
<PaginationNext
138+
href={`/app/${keyid}/files?page=${
139+
Number(page) + 1
140+
}`}
141+
/>
142+
</PaginationItem>
143+
<PaginationItem>
144+
<PaginationLink
145+
href={`/app/${keyid}/files?page=${totalPages}`}
146+
className={`
114147
${
115148
parseInt(page) === totalPages
116149
? "pointer-events-none text-slate-400"
117150
: ""
118151
}
119152
`}
120-
>
121-
<DoubleArrowRightIcon className="h-4 w-4" />
122-
</PaginationLink>
123-
</PaginationItem>
124-
</PaginationContent>
125-
</Pagination>
153+
>
154+
<DoubleArrowRightIcon className="h-4 w-4" />
155+
</PaginationLink>
156+
</PaginationItem>
157+
</PaginationContent>
158+
</Pagination>
159+
</>
160+
)}
126161
</>
127162
);
128163
}

0 commit comments

Comments
 (0)