Add media section folder ui

nandesh-dev · Oct 13, 2024 · e71f172 · e71f172
1 parent e848fab
commit e71f172
Show file tree

Hide file tree

Showing 10 changed files with 253 additions and 46 deletions.
diff --git a/web/assets/file.tsx b/web/assets/file.tsx
@@ -0,0 +1,23 @@
+import { CSSProperties } from "react";
+
+export function FileIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <svg
+      width="23"
+      height="18"
+      viewBox="0 0 23 18"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M2.3 18C1.6675 18 1.12623 17.7799 0.6762 17.3396C0.2254 16.8986 0 16.3688 0 15.75V2.25C0 1.63125 0.2254 1.10175 0.6762 0.6615C1.12623 0.2205 1.6675 0 2.3 0H8.25125C8.55792 0 8.8504 0.0562501 9.1287 0.16875C9.40623 0.28125 9.65042 0.440625 9.86125 0.646875L11.5 2.25H20.7C21.3325 2.25 21.8741 2.4705 22.3249 2.9115C22.775 3.35175 23 3.88125 23 4.5V15.75C23 16.3688 22.775 16.8986 22.3249 17.3396C21.8741 17.7799 21.3325 18 20.7 18H2.3ZM2.3 2.25V15.75H20.7V4.5H10.5513L8.25125 2.25H2.3Z" />
+    </svg>
+  );
+}
diff --git a/web/assets/folder.tsx b/web/assets/folder.tsx
@@ -0,0 +1,24 @@
+import { CSSProperties } from "react";
+
+export function FolderIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <svg
+      width="52"
+      height="38"
+      viewBox="0 0 52 38"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M43.207 0.128418H9.20703C6.99789 0.128418 5.20703 1.91928 5.20703 4.12842V9.25683C5.20703 9.25683 21.4979 9.12842 23.707 9.12842C23.707 9.12842 26.7317 5.7363 27.7244 4.7436C28.7171 3.75089 30.9298 2.99819 32.4215 2.99819L47.0174 2.99819C46.7092 0.95483 45.4162 0.128418 43.207 0.128418Z" />
+      <path d="M23.7001 13.1319C24.8351 13.1319 25.9168 12.6497 26.6754 11.8054L29.8014 8.32649C30.5601 7.48222 31.6417 7 32.7767 7H47.3554C49.8008 7 51.6738 9.17486 51.3112 11.5932L47.8619 34.5932C47.5682 36.5514 45.8862 38 43.9061 38H7.07635C5.08953 38 3.40385 36.5417 3.11797 34.5756L0.665299 17.7074C0.314465 15.2946 2.18546 13.1319 4.62367 13.1319H23.7001Z" />
+    </svg>
+  );
+}
diff --git a/web/assets/home.tsx b/web/assets/home.tsx
@@ -1,4 +1,12 @@
-export function HomeIcon({ className }: { className: string | undefined }) {
+import { CSSProperties } from "react";
+
+export function HomeIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}) {
   return (
     <svg
       width="20"
@@ -7,6 +15,7 @@ export function HomeIcon({ className }: { className: string | undefined }) {
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
       className={className}
+      style={style}
     >
       <path d="M2.5 19.4857H6.25V11.9429H13.75V19.4857H17.5V8.17143L10 2.51429L2.5 8.17143V19.4857ZM2.5 22C1.8125 22 1.22417 21.754 0.735 21.2621C0.245 20.7693 0 20.1771 0 19.4857V8.17143C0 7.77333 0.0887498 7.39619 0.26625 7.04C0.442916 6.68381 0.6875 6.39048 1 6.16L8.5 0.502857C8.72917 0.335238 8.96875 0.209524 9.21875 0.125714C9.46875 0.0419046 9.72917 0 10 0C10.2708 0 10.5312 0.0419046 10.7812 0.125714C11.0313 0.209524 11.2708 0.335238 11.5 0.502857L19 6.16C19.3125 6.39048 19.5575 6.68381 19.735 7.04C19.9117 7.39619 20 7.77333 20 8.17143V19.4857C20 20.1771 19.7554 20.7693 19.2663 21.2621C18.7763 21.754 18.1875 22 17.5 22H11.25V14.4571H8.75V22H2.5Z" />
     </svg>

diff --git a/web/assets/index.ts b/web/assets/index.ts
@@ -1 +1,4 @@
 export * from "./home";
+export * from "./file";
+export * from "./folder";
+export * from "./search";
diff --git a/web/assets/search.tsx b/web/assets/search.tsx
@@ -0,0 +1,23 @@
+import { CSSProperties } from "react";
+
+export function SearchIcon({
+  className,
+  style,
+}: {
+  className?: string;
+  style?: CSSProperties;
+}) {
+  return (
+    <svg
+      width="19"
+      height="19"
+      viewBox="0 0 19 19"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+      style={style}
+    >
+      <path d="M13.2467 12.2936H12.4126L12.117 12.0085C13.384 10.5303 14.0386 8.51366 13.6796 6.37032C13.1834 3.4351 10.7338 1.09115 7.7775 0.732163C3.31132 0.183129 -0.447455 3.9419 0.101578 8.40808C0.460562 11.3644 2.80452 13.814 5.73974 14.3102C7.88308 14.6692 9.89972 14.0146 11.3779 12.7476L11.663 13.0432V13.8773L16.1503 18.3646C16.5832 18.7975 17.2906 18.7975 17.7235 18.3646C18.1563 17.9317 18.1563 17.2243 17.7235 16.7914L13.2467 12.2936ZM6.91171 12.2936C4.28268 12.2936 2.16046 10.1713 2.16046 7.5423C2.16046 4.91327 4.28268 2.79104 6.91171 2.79104C9.54074 2.79104 11.663 4.91327 11.663 7.5423C11.663 10.1713 9.54074 12.2936 6.91171 12.2936Z" />
+    </svg>
+  );
+}
diff --git a/web/src/index.css b/web/src/index.css
@@ -2,6 +2,18 @@
 @tailwind components;
 @tailwind utilities;
 
+input {
+  border: none;
+  background: none;
+  padding: 0;
+  margin: 0;
+  outline: none;
+  box-shadow: none;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+}
+
 @layer utilities {
   .text-vertical {
     writing-mode: vertical-lr;

diff --git a/web/src/main.tsx b/web/src/main.tsx
@@ -4,6 +4,7 @@ import "./index.css";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import { Root } from "./routes/root";
 import { Home } from "./routes/home/home";
+import { Media } from "./routes/media/media";
 
 const router = createBrowserRouter([
   {
@@ -14,6 +15,10 @@ const router = createBrowserRouter([
         path: "home",
         element: <Home />,
       },
+      {
+        path: "media/*",
+        element: <Media />,
+      },
     ],
   },
 ]);

diff --git a/web/src/routes/media/media.tsx b/web/src/routes/media/media.tsx
@@ -0,0 +1,81 @@
+import { useParams } from "react-router-dom";
+import { FolderIcon, SearchIcon } from "../../../assets";
+import { Large, Small } from "../../utils/react_responsive";
+
+export function Media() {
+  const { "*": mediaPath } = useParams();
+
+  return (
+    <>
+      <Small>
+        <section className="flex flex-col h-full gap-sm">
+          <section className="flex flex-col gap-sm">
+            <SearchBar />
+            <div className="flex flex-row items-center gap-lg">
+              <h2 className="text-md text-gray-830">Media</h2>
+              <p className="text-sm text-gray-520">/media/{mediaPath}</p>
+            </div>
+          </section>
+          <section className="grid overflow-y-auto grid-flow-row gap-sm pb-xxl">
+            <Folder name="Movies" subtitle={{ present: 10, total: 20 }} />
+            <div className="rounded-sm h-[4px] bg-gray-80" content="2" />
+          </section>
+        </section>
+      </Small>
+      <Large>
+        <section className="flex flex-col h-full gap-sm py-xxl px-lg">
+          <section className="grid grid-cols-[1fr_20rem]">
+            <div className="flex flex-row items-center gap-lg">
+              <h2 className="text-md text-gray-830">Media</h2>
+              <p className="text-sm text-gray-520">/media/{mediaPath}</p>
+            </div>
+            <SearchBar />
+          </section>
+          <section className="grid overflow-y-auto grid-flow-row w-full gap-sm">
+            <div className="grid grid-cols-[repeat(auto-fill,minmax(18rem,1fr))] gap-sm">
+              <Folder name="Movies" subtitle={{ present: 10, total: 20 }} />
+            </div>
+            <div className="rounded-sm h-[4px] bg-gray-80" />
+          </section>
+        </section>
+      </Large>
+    </>
+  );
+}
+
+type FolderProp = {
+  name: string;
+  subtitle: {
+    present: number;
+    total: number;
+  };
+};
+
+function Folder({ name, subtitle }: FolderProp) {
+  return (
+    <div className="grid rounded-sm grid-cols-[auto_1fr] p-md bg-gray-80 gap-md">
+      <FolderIcon className="h-full fill-red" />
+      <div className="">
+        <p className="text-sm text-gray-830">{name}</p>
+        <div className="flex flex-row justify-between w-full">
+          <p className="text-xs text-gray-520">Subtitle</p>
+          <p className="text-xs text-gray-520">
+            {subtitle.present}/{subtitle.total}
+          </p>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+function SearchBar() {
+  return (
+    <div className="flex flex-row items-center w-full h-full rounded-md bg-gray-120 gap-sm px-sm py-xs">
+      <SearchIcon className="fill-gray-520" />
+      <input
+        className="w-full text-sm placeholder:text-gray-190 text-gray-830 placeholder:text-sm"
+        placeholder="Search"
+      />
+    </div>
+  );
+}
diff --git a/web/src/routes/root.tsx b/web/src/routes/root.tsx
@@ -1,8 +1,10 @@
-import { Link, Outlet } from "react-router-dom";
-import { HomeIcon } from "../../assets";
+import { Link, Outlet, useLocation } from "react-router-dom";
+import { FileIcon, HomeIcon } from "../../assets";
 import { Desktop, Mobile, Tablet } from "../utils/react_responsive";
 
 export function Root() {
+  let location = useLocation();
+
   return (
     <>
       <Mobile>
@@ -15,22 +17,24 @@ export function Root() {
               <ul className="flex flex-row justify-between">
                 <li>
                   <Link to={"/home"}>
-                    <HomeIcon className="fill-primary" />
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
+                    <HomeIcon
+                      className={
+                        location.pathname.startsWith("/home")
+                          ? "fill-primary"
+                          : "fill-gray-830"
+                      }
+                    />
                   </Link>
                 </li>
                 <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
+                  <Link to={"/media"}>
+                    <FileIcon
+                      className={
+                        location.pathname.startsWith("/media")
+                          ? "fill-primary"
+                          : "fill-gray-830"
+                      }
+                    />
                   </Link>
                 </li>
               </ul>
@@ -45,26 +49,28 @@ export function Root() {
             <div className="rounded-sm w-fit h-[8rem] pt-lg bg-gray-190">
               <div className="h-full rounded-sm bg-primary w-xs"></div>
             </div>
-            <nav className="">
-              <ul className="flex flex-col justify-between gap-sm">
+            <nav>
+              <ul className="flex flex-col justify-between items-center gap-sm">
                 <li>
                   <Link to={"/home"}>
-                    <HomeIcon className="fill-primary" />
+                    <HomeIcon
+                      className={
+                        location.pathname.startsWith("/home")
+                          ? "fill-primary"
+                          : "fill-gray-830"
+                      }
+                    />
                   </Link>
                 </li>
                 <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <HomeIcon className="fill-gray-830" />
+                  <Link to={"/media"}>
+                    <FileIcon
+                      className={
+                        location.pathname.startsWith("/media")
+                          ? "fill-primary"
+                          : "fill-gray-830"
+                      }
+                    />
                   </Link>
                 </li>
               </ul>
@@ -73,7 +79,9 @@ export function Root() {
               Drop Your Subtitle
             </p>
           </section>
-          <Outlet />
+          <section className="overflow-hidden">
+            <Outlet />
+          </section>
         </section>
       </Tablet>
       <Desktop>
@@ -103,23 +111,29 @@ export function Root() {
             <nav className="">
               <ul className="flex flex-col justify-between gap-sm">
                 <li>
-                  <Link to={"/home"}>
-                    <p className="text-sm text-gray-830">Home</p>
+                  <Link
+                    to={"/home"}
+                    className={
+                      "text-sm " +
+                      (location.pathname.startsWith("/home")
+                        ? "text-primary"
+                        : "text-gray-830")
+                    }
+                  >
+                    Home
                   </Link>
                 </li>
                 <li>
-                  <Link to={"/home"}>
-                    <p className="text-sm text-primary">Files</p>
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <p className="text-sm text-gray-830">Issues</p>
-                  </Link>
-                </li>
-                <li>
-                  <Link to={"/home"}>
-                    <p className="text-sm text-gray-830">Settings</p>
+                  <Link
+                    to={"/media"}
+                    className={
+                      "text-sm " +
+                      (location.pathname.startsWith("/media")
+                        ? "text-primary"
+                        : "text-gray-830")
+                    }
+                  >
+                    Media
                   </Link>
                 </li>
               </ul>
@@ -130,6 +144,9 @@ export function Root() {
               <p className="text-sm text-gray-190">Subtitle</p>
             </div>
           </section>
+          <section className="overflow-hidden">
+            <Outlet />
+          </section>
         </section>
       </Desktop>
     </>

diff --git a/web/src/utils/react_responsive.tsx b/web/src/utils/react_responsive.tsx
@@ -15,3 +15,13 @@ export function Desktop({ children }: { children: ReactNode }) {
   const isDesktop = useMediaQuery({ minWidth: "1024px" });
   return isDesktop ? children : null;
 }
+
+export function Small({ children }: { children: ReactNode }) {
+  const isDesktop = useMediaQuery({ maxWidth: "640px" });
+  return isDesktop ? children : null;
+}
+
+export function Large({ children }: { children: ReactNode }) {
+  const isDesktop = useMediaQuery({ minWidth: "640px" });
+  return isDesktop ? children : null;
+}