add video page

src/templates/Components/PageNavigation.tsx

@@ -1,32 +1,57 @@
-export default function PageNav() {
-
-  const ipp = [12,24,32,48,72,100,250,500,1000]
+export default function PageNav(props: { path: string }) {
+  let ipp;
+  if (props.path == "/images") {
+    ipp = [12, 24, 32, 48, 72, 100, 250, 500, 1000];
+  } else {
+    ipp = [24, 48, 72, 100];
+  }
 
   return (
     <div className="bg-orange-800/50 rounded-sm p-2 text-white flex justify-between gap-4 items-center">
-      <button className="flex justify-center items-center cursor-pointer" id="nav_prev">
+      <button
+        className="flex justify-center items-center cursor-pointer"
+        id="nav_prev"
+      >
         <div className="material-symbols--navigate-before w-16 h-16"></div>
       </button>
       <div className="flex gap-4">
         {ipp.map((item, idx) => {
-            return <button key={`ipp_${item}`}
-            className={`${idx > 4 ? "hidden md:block" : ""} cursor-pointer md:text-lg lg:text-xl text-gray-200`}
-            id="nav_ipp"
-            data-ipp={item}
-            >{item}</button>
+          return (
+            <button
+              key={`ipp_${item}`}
+              className={`${
+                idx > 4 ? "hidden md:block" : ""
+              } cursor-pointer md:text-lg lg:text-xl text-gray-200`}
+              id="nav_ipp"
+              data-ipp={item}
+            >
+              {item}
+            </button>
+          );
         })}
       </div>
       <div className="flex">
         <div className="gap-1 hidden xl:flex">
-            <button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="grid">
-                <div className="material-symbols--grid-on w-8 h-8"></div>
-            </button>
-            <button className="flex justify-center items-center cursor-pointer text-gray-200" id="nav_view" data-view="masonry">
-                <div className="material-symbols--dashboard-rounded w-8 h-8"></div>
-            </button>
+          <button
+            className="flex justify-center items-center cursor-pointer text-gray-200"
+            id="nav_view"
+            data-view="grid"
+          >
+            <div className="material-symbols--grid-on w-8 h-8"></div>
+          </button>
+          <button
+            className="flex justify-center items-center cursor-pointer text-gray-200"
+            id="nav_view"
+            data-view="masonry"
+          >
+            <div className="material-symbols--dashboard-rounded w-8 h-8"></div>
+          </button>
         </div>
-        <button className="flex justify-center items-center cursor-pointer" id="nav_next">
-            <div className="material-symbols--navigate-next w-16 h-16"></div>
+        <button
+          className="flex justify-center items-center cursor-pointer"
+          id="nav_next"
+        >
+          <div className="material-symbols--navigate-next w-16 h-16"></div>
         </button>
       </div>
     </div>

src/templates/Components/PlaceHolderVid.tsx

@@ -0,0 +1,17 @@
+export default function PlaceholderVid(props: { isMobileHidden?: boolean }) {
+  return (
+    <video
+      data-type="placeholder__video"
+      controls={true}
+      className={`relative aspect-square w-full h-full max-w-48 max-h-48 sm:max-w-none sm:max-h-none rounded-sm [&:not(:fullscreen)]:object-cover ${
+        props.isMobileHidden ? "hidden xl:block" : ""
+      }`}
+    >
+      <div
+        data-type="placeholder__video__loader"
+        className="w-full h-full absolute inset-0 bg-gray-400 opacity-30 animate-pulse z-[3]"
+      ></div>
+      <source className={`${props.isMobileHidden ? "hidden xl:block" : ""}`}></source>
+    </video>
+  );
+}

src/templates/images.tsx

@@ -3,12 +3,12 @@ import PageNav from "./Components/PageNavigation";
 export default function ImagesPage() {
   return (
     <>
-      <PageNav />
+      <PageNav path="/images"/>
       <div
         id="images_images"
         className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       ></div>
-      <PageNav />
+      <PageNav path="/images"/>
     </>
   );
 }

src/templates/index.tsx

@@ -1,5 +1,6 @@
 import AllLink from "./Components/AllLink";
 import Placeholder from "./Components/PlaceHolder";
+import PlaceholderVid from "./Components/PlaceHolderVid";
 
 export default function IndexPage() {
   return (
@@ -7,13 +8,33 @@ export default function IndexPage() {
       <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Images</p>
       <div
         id="index_images"
-        className="mt-2 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+        className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
       >
         {[...Array(7).keys()].map((idx) => {
-          return <Placeholder key={`placeholder__image-${idx}`} isMobileHidden={idx > 4} />;
+          return (
+            <Placeholder
+              key={`placeholder__image-${idx}`}
+              isMobileHidden={idx > 4}
+            />
+          );
         })}
         <AllLink location="/images/" text="View All Images" />
       </div>
+      <p className="text-4xl bg-orange-800/50 rounded-sm p-4">Videos</p>
+      <div
+        id="index_videos"
+        className="mt-2 mb-4 flex overflow-x-auto sm:overflow-x-hidden sm:grid sm:grid-cols-[repeat(auto-fill,minmax(25%,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+      >
+        {[...Array(3).keys()].map((idx) => {
+          return (
+            <PlaceholderVid
+              key={`placeholder__video-${idx}`}
+              isMobileHidden={idx > 1}
+            />
+          );
+        })}
+        <AllLink location="/videos/" text="View All Videos" />
+      </div>
     </div>
   );
 }

src/templates/videos.tsx

@@ -0,0 +1,14 @@
+import PageNav from "./Components/PageNavigation";
+
+export default function VideosPage() {
+  return (
+    <>
+      <PageNav path="/videos"/>
+      <div
+        id="videos_videos"
+        className="my-2 overflow-hidden grid grid-cols-[repeat(auto-fill,minmax(250px,1fr))] xl:grid-cols-[repeat(auto-fill,minmax(20%,1fr))] sm:items-center sm:justify-center gap-2"
+      ></div>
+      <PageNav path="/videos"/>
+    </>
+  );
+}