From a03921329cc6f6558f2f5db241848e42922dbdb8 Mon Sep 17 00:00:00 2001
From: MarconLP <13001502+MarconLP@users.noreply.github.com>
Date: Tue, 11 Apr 2023 12:58:48 +0200
Subject: [PATCH] redesign video list page

---
 src/pages/videos.tsx | 69 ++++++++++++++++++++++++++++++++++----------
 1 file changed, 53 insertions(+), 16 deletions(-)

diff --git a/src/pages/videos.tsx b/src/pages/videos.tsx
index 8950dca..f1e51d9 100644
--- a/src/pages/videos.tsx
+++ b/src/pages/videos.tsx
@@ -14,19 +14,56 @@ const VideoList: NextPage = () => {
         <meta name="description" content="Generated by create-t3-app" />
         <link rel="icon" href="/favicon.ico" />
       </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 ">
-          {[
-            { 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: "h7r9e" },
-          ].map(({ title, id }) => (
-            <VideoCard title={title} id={id} key={id} />
-          ))}
+      <main className="flex h-screen min-h-screen flex-col items-center justify-center bg-gradient-to-b from-[#2e026d] to-[#15162c]">
+        <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>
+          <div>
+            <span className="cursor-pointer rounded border border-[#0000001a] px-2 py-2 text-sm text-[#292d34] hover:bg-[#fafbfc]">
+              New video
+            </span>
+          </div>
+        </div>
+        <div className="flex w-full items-center justify-center overflow-auto bg-[#fbfbfb]">
+          <div className="flex-start jusitfy-start container flex max-w-[1200px] flex-row flex-wrap items-center gap-14 px-4 pb-16">
+            {[
+              { 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>
       </main>
     </>
@@ -41,7 +78,7 @@ interface VideoCardProps {
 const VideoCard = ({ title, id }: VideoCardProps) => {
   return (
     <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>
           <img
             src="https://daisyui.com/images/stock/photo-1606107557195-0e29a4b5b4aa.jpg"
@@ -49,8 +86,8 @@ const VideoCard = ({ title, id }: VideoCardProps) => {
           />
         </figure>
         <div className="m-4 flex flex-col">
-          <span className="line-clamp-2 font-bold">{title}</span>
-          <span className="">12 days ago</span>
+          <span className="line-clamp-2 font-bold text-[0f0f0f]">{title}</span>
+          <span className="text-[#606060]">12 days ago</span>
         </div>
       </div>
     </Link>