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

use dynamic values

Browse source
This commit is contained in:
MarconLP 2023-04-11 00:43:53 +02:00
parent 1ed742afd7
commit 41aa1802ea
No known key found for this signature in database
GPG key ID: F4CAFFDFA3451D5E
1 changed files with 26 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

40
src/pages/videos.tsx
View file

@ -2,6 +2,7 @@ import { type NextPage } from "next";
import Head from "next/head"; import Head from "next/head";
import { api } from "~/utils/api"; import { api } from "~/utils/api";
import Link from "next/link";
const VideoList: NextPage = () => { const VideoList: NextPage = () => {
const hello = api.example.hello.useQuery({ text: "from tRPC" }); const hello = api.example.hello.useQuery({ text: "from tRPC" });
@ -15,8 +16,12 @@ const VideoList: NextPage = () => {
</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 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="container flex flex-row items-center justify-center gap-12 px-4 py-16 text-white ">
{[1, 2, 3].map((id) => ( {[
<VideoCard key={id} /> { title: "are pings bad?", id: "4e98f4a" },
{ title: "do you really need a backend?", id: "h4b98rt" },
{ title: "how next works", id: "h7r9e" },
].map(({ title, id }) => (
<VideoCard title={title} id={id} key={id} />
))} ))}
</div> </div>
</main> </main>
@ -24,20 +29,27 @@ const VideoList: NextPage = () => {
); );
}; };
const VideoCard = () => { interface VideoCardProps {
title: string;
id: string;
}
const VideoCard = ({ title, id }: VideoCardProps) => {
return ( return (
<div className="h-[220px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#3f3f46] text-sm font-normal"> <Link href={`/share/${id}`}>
<figure> <div className="h-[220px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#3f3f46] text-sm font-normal">
<img <figure>
src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg" <img
alt="Shoes" src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
/> alt="Shoes"
</figure> />
<div className="m-4 flex flex-col"> </figure>
<span className="font-bold">Are pings bad?</span> <div className="m-4 flex flex-col">
<span className="">12 days ago</span> <span className="font-bold">{title}</span>
<span className="">12 days ago</span>
</div>
</div> </div>
</div> </Link>
); );
}; };