admin-aaw/snapify-authentik
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions 2

redesign video list page

Browse source
This commit is contained in:
MarconLP 2023-04-11 12:58:48 +02:00
parent b335f4acd4
commit a03921329c
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
1 changed files with 53 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
src/pages/videos.tsx
View file

@ -14,19 +14,56 @@ const VideoList: NextPage = () => {
<meta name="description" content="Generated by create-t3-app" /> <meta name="description" content="Generated by create-t3-app" />
<link rel="icon" href="/favicon.ico" /> <link rel="icon" href="/favicon.ico" />
</Head> </Head>
<main className="flex min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]"> <main className="flex h-screen min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
<div className="container flex flex-row items-center justify-center gap-12 px-4 py-16 text-white "> <div className="flex min-h-[80px] w-full items-center justify-between border-b border-solid border-b-[#E7E9EB] bg-white px-6">
{[ <span>Screenity</span>
{ title: "are pings bad?", id: "4e98f4a" }, <div>
{ <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
title: New video
"do you really need a backend? because there is a much better alternative to it.", </span>
id: "h4b98rt", </div>
}, </div>
{ title: "how next works", id: "h7r9e" }, <div className="flex w-full items-center justify-center overflow-auto bg-[#fbfbfb]">
].map(({ title, id }) => ( <div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16">
<VideoCard title={title} id={id} key={id} /> {[
))} { title: "are pings bad?", id: "4e98f4a" },
{
title:
"do you really need a backend? because there is a much better alternative to it.",
id: "h4b98rt",
},
{ title: "how next works", id: "1h7r9e" },
{ title: "how next works", id: "h27r9e" },
{ title: "how next works", id: "h73r9e" },
{ title: "how next works", id: "h7r49e" },
{ title: "how next works", id: "h7r95e" },
{ title: "how next works", id: "h7r9e6" },
{ title: "how next works", id: "eh7r9e" },
{ title: "how next works", id: "hf7r9e" },
{ title: "how next works", id: "h7fr9e" },
{ title: "how next works", id: "h7rrs9e" },
{ title: "how next works", id: "h7rg9e" },
{ title: "how next works", id: "h7rr9e" },
{ title: "how next works", id: "h7rh9e" },
{ title: "how next works", id: "h7sar9e" },
{ title: "how next works", id: "h7er9e" },
{ title: "how next works", id: "h7wrr9e" },
{ title: "how next works", id: "h7r9qe" },
{ title: "how next works", id: "h7r9rqewe" },
{ title: "how next works", id: "h7r9ern" },
{ title: "how next works", id: "h7r9vyxe" },
{ title: "how next works", id: "h7r9asfe" },
{ title: "how next works", id: "h7rea9e" },
{ title: "how next works", id: "h7r9aefe" },
{ title: "how next works", id: "h7rht9e" },
{ title: "how next works", id: "h7r9e48" },
{ title: "how next works", id: "h7r9e848" },
{ title: "how next works", id: "h7r9468e" },
{ title: "how next works", id: "h7r93181e" },
].map(({ title, id }) => (
<VideoCard title={title} id={id} key={id} />
))}
</div>
</div> </div>
</main> </main>
</> </>
@ -41,7 +78,7 @@ interface VideoCardProps {
const VideoCard = ({ title, id }: VideoCardProps) => { const VideoCard = ({ title, id }: VideoCardProps) => {
return ( return (
<Link href={`/share/${id}`}> <Link href={`/share/${id}`}>
<div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#3f3f46] text-sm font-normal"> <div className="h-[240px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#6c668533] text-sm font-normal">
<figure> <figure>
<img <img
src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
@ -49,8 +86,8 @@ const VideoCard = ({ title, id }: VideoCardProps) => {
/> />
</figure> </figure>
<div className="m-4 flex flex-col"> <div className="m-4 flex flex-col">
<span className="line-clamp-2 font-bold">{title}</span> <span className="line-clamp-2 font-bold text-[0f0f0f]">{title}</span>
<span className="">12 days ago</span> <span className="text-[#606060]">12 days ago</span>
</div> </div>
</div> </div>
</Link> </Link>