refactor: improve row interaction

hirosystems · Jul 26, 2023 · 4bfc0f6 · 4bfc0f6
1 parent 7ba27b4
commit 4bfc0f6
Show file tree

Hide file tree

Showing 8 changed files with 544 additions and 260 deletions.
diff --git a/app/(explorer)/page.tsx b/app/(explorer)/page.tsx
@@ -3,12 +3,13 @@ import Link from "next/link";
 import { Metadata } from "next";
 import CtaLink from "../../components/CtaLink";
 import Footer from "../../components/Footer";
-import { mimeTypes } from "../../components/GalleryFull";
+
 import GalleryPreview from "../../components/GalleryPreview";
 import GalleryRow from "../../components/GalleryRow";
 import Header from "../../components/Header";
 import Intro from "../../components/Intro";
 import SearchBar from "../../components/SearchBar";
+import { mimeTypes } from "../../lib/utils";
 
 export const metadata: Metadata = {
   title: "Hiro Ordinals Explorer | ordinals.hiro.so",
@@ -20,7 +21,7 @@ export default function Home() {
   return (
     <>
       <Header />
-      <main className="mx-auto flex min-h-screen max-w-5xl flex-col items-center justify-between space-y-6 p-6">
+      <main className="mx-auto flex min-h-screen w-full max-w-5xl flex-col items-center justify-between space-y-6 p-6">
         {/* Intro Section */}
         <div className="mx-auto max-w-2xl space-y-10">
           {/* todo: wrap in motion */}
@@ -53,22 +54,23 @@ export default function Home() {
 
         {/* Gallery Section */}
         <div className="w-full">
-          <p className="mt-20 text-center text-sm uppercase">
-            Latest Image Inscriptions
-          </p>
-          <div className="mx-auto mb-4 mt-3 h-12 w-0 border border-dashed border-l-black" />
-
-          <GalleryRow
-            params={
-              new URLSearchParams(mimeTypes.image.map((i) => ["mime_type", i]))
-            }
-          />
-
-          <div className="mt-16 flex justify-around">
+          <div className="mt-20 flex justify-between">
+            <p className="text-sm uppercase">Latest Image Inscriptions</p>
+            <Link
+              href="/explore?f=image"
+              className="text-sm text-neutral-500 hover:underline"
+            >
+              Explore &rarr;
+            </Link>
+          </div>
+          <div className="mt-4" />
+          {/* <div className="mx-auto mb-4 mt-3 h-12 w-0 border border-dashed border-l-black" /> */}
+          <GalleryRow query={mimeTypes.image.map((i) => ["mime_type", i])} />
+          {/* <div className="mt-16 flex justify-around">
             <CtaLink href="/explore">
               Explore all, sort, and filter &rarr;
             </CtaLink>
-          </div>
+          </div> */}
         </div>
 
         <div className="w-full py-8">

diff --git a/components/CtaLink.tsx b/components/CtaLink.tsx
@@ -12,7 +12,7 @@ const CtaLink = (props: {
     <Link
       href={props.href}
       className={cn(
-        "cta-link rounded-[4px] border-2 border-black bg-neutral-500 px-[24px] py-[15px] text-white",
+        "cta-link rounded-[4px] border-2 border-black bg-neutral-500 px-[24px] py-[15px] text-white transition-colors hover:bg-black",
         props.className
       )}
     >

diff --git a/components/GalleryFull.tsx b/components/GalleryFull.tsx
@@ -1,38 +1,15 @@
+"use client";
+
 import useSWR from "swr";
 import { API_URL } from "../lib/constants";
-import { fetcher } from "../lib/utils";
 import { InscriptionResponse, ListResponse } from "../lib/types";
-import InscriptionCard from "./inscriptions/InscriptionCard";
+import { fetcher, mimeTypes } from "../lib/utils";
 import Error from "./Error";
+import InscriptionCard from "./inscriptions/InscriptionCard";
 
 // const limit = 60; // LCM of 3, 4, 5, 6
 const limit = 20; // todo: increase limit on api end
 
-// todo: add more common mime types
-// From https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
-export const mimeTypes = {
-  // Safe Images https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types
-  image: [
-    "image/apng",
-    "image/avif",
-    "image/gif",
-    "image/jpg",
-    "image/jpeg",
-    "image/png",
-    "image/svg+xml",
-    "image/webp",
-  ],
-  audio: ["audio/midi", "audio/mod", "audio/mpeg"],
-  video: ["video/mp4", "video/webm"],
-  text: ["text/html", "text/markdown", "text/plain"],
-  binary: [
-    "application/epub+zip",
-    "application/json",
-    "application/pdf",
-    "application/pgp-signature",
-  ],
-} as const;
-
 export type V1InscriptionsOptions = {
   page: number;
   order: string;

diff --git a/components/GalleryPreview.tsx b/components/GalleryPreview.tsx
@@ -5,11 +5,13 @@ import { useEffect } from "react";
 import useSWR from "swr";
 
 import { API_URL } from "../lib/constants";
-import { fetcher } from "../lib/utils";
+import { cn, fetcher } from "../lib/utils";
 import { lastInscriptionDataAtom } from "../lib/store";
 import { InscriptionResponse, ListResponse } from "../lib/types";
 import InscriptionCard from "./inscriptions/InscriptionCard";
 
+const limit = 8
+
 const GalleryPreview = () => {
   const setLastInscriptionData = useSetAtom(lastInscriptionDataAtom);
 
@@ -29,13 +31,13 @@ const GalleryPreview = () => {
 
   if (error) return <span>Something went wrong ʕ•̠͡•ʔ</span>;
 
-  const previews = data ? data.results : Array(12).fill(null); // skeleton values
+  const previews = data ? data.results : Array(limit).fill(null); // skeleton values
 
   return (
     <>
       <div className="grid grid-cols-3 gap-4 md:grid-cols-4">
-        {previews.slice(0, 12).map((i, index) => (
-          <InscriptionCard key={index} inscription={i} />
+        {previews.slice(0, limit).map((i, index) => (
+          <InscriptionCard key={index} inscription={i} className={cn(index >= 6 && "hidden md:block")}/>
         ))}
       </div>
       {/* todo: re-add figma link to full feed */}

diff --git a/components/GalleryRow.tsx b/components/GalleryRow.tsx
@@ -1,14 +1,25 @@
-import useSWR from "swr";
+"use client";
 
+import { motion, useScroll, useTransform } from "framer-motion";
+import { useRef } from "react";
+import useSWR from "swr";
 import { API_URL } from "../lib/constants";
-
 import { InscriptionResponse, ListResponse } from "../lib/types";
 import { fetcher } from "../lib/utils";
 import InscriptionCard from "./inscriptions/InscriptionCard";
 
-const GalleryRow = (props: { params?: URLSearchParams }) => {
+const GalleryRow = ({ query }: { query?: string[][] }) => {
+  const rowRef = useRef<HTMLDivElement>(null);
+  const { scrollXProgress } = useScroll({
+    container: rowRef,
+  } as any); // todo: update framer motion, remove any
+
+  const opacityLeft = useTransform(scrollXProgress, [0, 0.05, 1], [0, 1, 1]);
+  const opacityRight = useTransform(scrollXProgress, [0, 0.95, 1], [1, 1, 0]);
+
+  const params = new URLSearchParams(query);
   const { data, error, isLoading } = useSWR<ListResponse<InscriptionResponse>>(
-    `${API_URL}/inscriptions?${props.params?.toString() ?? ""}`,
+    `${API_URL}/inscriptions?${params?.toString() ?? ""}`,
     fetcher
   );
 
@@ -18,14 +29,32 @@ const GalleryRow = (props: { params?: URLSearchParams }) => {
 
   return (
     <div className="relative">
-      <div className=" flex flex-row gap-4 overflow-scroll">
+      <div className="flex flex-row gap-4 overflow-scroll" ref={rowRef}>
         {previews.slice(0, 12).map((i, index) => (
-          <div className="mb-3 shrink-0 basis-1/5" key={index}>
+          <div className="mb-3 shrink-0 grow-0 basis-1/5" key={index}>
             <InscriptionCard inscription={i} className="w-full" />
           </div>
         ))}
       </div>
-      <div className="absolute bottom-0 right-0 top-0 w-20 bg-gradient-to-r from-transparent to-white" />
+      <svg id="progress" width="100" height="100" viewBox="0 0 100 100">
+        <circle cx="50" cy="50" r="30" pathLength="1" className="bg" />
+        <motion.circle
+          cx="50"
+          cy="50"
+          r="30"
+          pathLength="1"
+          className="indicator"
+          style={{ pathLength: scrollXProgress }}
+        />
+      </svg>
+      <motion.div
+        style={{ opacity: opacityLeft }}
+        className="absolute bottom-0 left-0 top-0 w-20 bg-gradient-to-l from-transparent to-white"
+      />
+      <motion.div
+        style={{ opacity: opacityRight }}
+        className="absolute bottom-0 right-0 top-0 w-20 bg-gradient-to-r from-transparent to-white"
+      />
     </div>
   );
 };

diff --git a/lib/utils.ts b/lib/utils.ts
@@ -1,6 +1,31 @@
 import { ClassValue, clsx } from "clsx";
 import { twMerge } from "tailwind-merge";
 
+// todo: add more common mime types
+// From https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types
+export const mimeTypes = {
+  // Safe Images https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#image_types
+  image: [
+    "image/apng",
+    "image/avif",
+    "image/gif",
+    "image/jpg",
+    "image/jpeg",
+    "image/png",
+    "image/svg+xml",
+    "image/webp",
+  ],
+  audio: ["audio/midi", "audio/mod", "audio/mpeg"],
+  video: ["video/mp4", "video/webm"],
+  text: ["text/html", "text/markdown", "text/plain"],
+  binary: [
+    "application/epub+zip",
+    "application/json",
+    "application/pdf",
+    "application/pgp-signature",
+  ],
+} as const;
+
 export function cn(...inputs: ClassValue[]) {
   return twMerge(clsx(inputs));
 }