use dynamic values

src/pages/videos.tsx

@@ -2,6 +2,7 @@ import { type NextPage } from "next";
 import Head from "next/head";
 
 import { api } from "~/utils/api";
+import Link from "next/link";
 
 const VideoList: NextPage = () => {
   const hello = api.example.hello.useQuery({ text: "from tRPC" });
@@ -15,8 +16,12 @@ const VideoList: NextPage = () => {
       </Head>
       <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 ">
-          {[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>
       </main>
@@ -24,8 +29,14 @@ const VideoList: NextPage = () => {
   );
 };
 
-const VideoCard = () => {
+interface VideoCardProps {
+  title: string;
+  id: string;
+}
+
+const VideoCard = ({ title, id }: VideoCardProps) => {
   return (
+    <Link href={`/share/${id}`}>
       <div className="h-[220px] w-[250px] cursor-pointer overflow-hidden rounded-lg border border-[#3f3f46] text-sm font-normal">
         <figure>
           <img
@@ -34,10 +45,11 @@ const VideoCard = () => {
           />
         </figure>
         <div className="m-4 flex flex-col">
-        <span className="font-bold">Are pings bad?</span>
+          <span className="font-bold">{title}</span>
           <span className="">12 days ago</span>
         </div>
       </div>
+    </Link>
   );
 };