Spaces:

enzostvs
/

space-shuffler

Running

App Files Files Community

enzostvs HF staff commited on Aug 23

Commit

f70bb71

•

1 Parent(s): d2a5dad

initial commit

Browse files

Files changed (21) hide show

Dockerfile +24 -0
README.md +12 -36
app/actions.ts +8 -0
app/layout.tsx +27 -13
app/page.tsx +25 -103
components/animate/card.tsx +67 -0
components/shuffler/button.tsx +13 -0
components/shuffler/index.tsx +54 -0
components/space/index.tsx +34 -0
components/space/sub/author.tsx +22 -0
components/space/sub/header.tsx +26 -0
components/theme-provider.tsx +9 -0
components/toggle-mode.tsx +12 -0
images/cards.svg +3 -0
next.config.mjs +10 -1
package-lock.json +53 -0
package.json +9 -5
{app → style}/globals.css +0 -0
tailwind.config.ts +38 -1
utils/network.ts +41 -0
utils/types.ts +25 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,24 @@

+# Dockerfile
+# Use an official Node.js runtime as the base image
+FROM node:18
+# Set the working directory in the container
+WORKDIR /usr/src/app
+# Copy package.json and package-lock.json to the container
+COPY package.json package-lock.json ./
+# Install dependencies
+RUN npm install
+# Copy the rest of the application files to the container
+COPY . .
+# Build the Next.js application for production
+RUN npm run build
+# Expose the application port (assuming your app runs on port 3000)
+EXPOSE 3000
+# Start the application
+CMD ["npm", "start"]

README.md CHANGED Viewed

@@ -1,36 +1,12 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-## Getting Started
-First, run the development server:
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-## Learn More
-To learn more about Next.js, take a look at the following resources:
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-## Deploy on Vercel
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

+---
+title: Space Shuffler
+emoji: 🔍♦️
+colorFrom: blue
+colorTo: pink
+sdk: docker
+pinned: false
+short_description: Find hidden gems from all HF Spaces
+license: mit
+---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app/actions.ts ADDED Viewed

	@@ -0,0 +1,8 @@

+"use server"
+import { fetchSpaceRandomly } from "@/utils/network"
+export const getSpace = async () => {
+  const space = await fetchSpaceRandomly();
+  return space;
+}

app/layout.tsx CHANGED Viewed

@@ -1,22 +1,36 @@
-import type { Metadata } from "next";
-import { Inter } from "next/font/google";
-import "./globals.css";
-const inter = Inter({ subsets: ["latin"] });
-export const metadata: Metadata = {
-  title: "Create Next App",
-  description: "Generated by create next app",
-};
 export default function RootLayout({
   children,
-}: Readonly<{
   children: React.ReactNode;
-}>) {
   return (
-    <html lang="en">
-      <body className={inter.className}>{children}</body>
-    </html>
   );
 }

+import { Inter, Montserrat } from "next/font/google";
+import { ThemeProvider } from "@/components/theme-provider";
+import "@/style/globals.css";
+const inter = Inter({ subsets: ["latin"], variable: "--font-inter" });
+const montserrat = Montserrat({
+  subsets: ["latin"],
+  variable: "--font-montserrat",
+});
 export default function RootLayout({
   children,
+}: {
   children: React.ReactNode;
+}) {
   return (
+    <>
+      <html lang="en" suppressHydrationWarning>
+        <head />
+        <body
+          className={`${inter.variable} ${montserrat.variable} bg-grid-small-white/5 font-sans`}
+        >
+          <ThemeProvider
+            attribute="class"
+            defaultTheme="system"
+            enableSystem
+            disableTransitionOnChange
+          >
+            {children}
+          </ThemeProvider>
+        </body>
+      </html>
+    </>
   );
 }

app/page.tsx CHANGED Viewed

@@ -1,112 +1,34 @@
 import Image from "next/image";
-export default function Home() {
   return (
-    <main className="flex min-h-screen flex-col items-center justify-between p-24">
-      <div className="z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex">
-        <p className="fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:static lg:w-auto  lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 lg:dark:bg-zinc-800/30">
-          Get started by editing&nbsp;
-          <code className="font-mono font-bold">app/page.tsx</code>
-        </p>
-        <div className="fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white dark:from-black dark:via-black lg:static lg:size-auto lg:bg-none">
-          <a
-            className="pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0"
-            href="https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            By{" "}
             <Image
-              src="/vercel.svg"
-              alt="Vercel Logo"
-              className="dark:invert"
-              width={100}
-              height={24}
-              priority
             />
-          </a>
-        </div>
-      </div>
-      <div className="relative z-[-1] flex place-items-center before:absolute before:h-[300px] before:w-full before:-translate-x-1/2 before:rounded-full before:bg-gradient-radial before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-full after:translate-x-1/3 after:bg-gradient-conic after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40 sm:before:w-[480px] sm:after:w-[240px] before:lg:h-[360px]">
-        <Image
-          className="relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert"
-          src="/next.svg"
-          alt="Next.js Logo"
-          width={180}
-          height={37}
-          priority
-        />
-      </div>
-      <div className="mb-32 grid text-center lg:mb-0 lg:w-full lg:max-w-5xl lg:grid-cols-4 lg:text-left">
-        <a
-          href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Docs{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Find in-depth information about Next.js features and API.
-          </p>
-        </a>
-        <a
-          href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Learn{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Learn about Next.js in an interactive course with&nbsp;quizzes!
-          </p>
-        </a>
-        <a
-          href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Templates{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
-          </h2>
-          <p className="m-0 max-w-[30ch] text-sm opacity-50">
-            Explore starter templates for Next.js.
-          </p>
-        </a>
-        <a
-          href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
-          className="group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          <h2 className="mb-3 text-2xl font-semibold">
-            Deploy{" "}
-            <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
-              -&gt;
-            </span>
           </h2>
-          <p className="m-0 max-w-[30ch] text-balance text-sm opacity-50">
-            Instantly deploy your Next.js site to a shareable URL with Vercel.
-          </p>
-        </a>
       </div>
     </main>
   );

 import Image from "next/image";
+import { Shuffle } from "lucide-react";
+import CardsSvg from "@/images/cards.svg";
+import { Space } from "@/components/space";
+import { fetchSpaceRandomly } from "@/utils/network";
+import { Shuffler } from "@/components/shuffler";
+export default async function Home() {
+  const space = await fetchSpaceRandomly();
+  const nextSpace = await fetchSpaceRandomly();
   return (
+    <main className="flex min-h-screen flex-col items-center justify-center p-8 lg:p-24">
+      <div className="w-full max-w-xl mx-auto grid gap-16 lg:gap-24 grid-cols-1">
+        <header className="grid grid-cols-1 gap-5">
+          <h1 className="relative font-sans text-center text-5xl lg:text-7xl font-extrabold max-w-max mx-auto text-transparent bg-clip-text bg-flashy">
+            Space Shuffler
             <Image
+              src={CardsSvg}
+              alt="Cards"
+              width={70}
+              height={70}
+              className="w-10 lg:w-14 absolute -right-9 lg:-right-12 -top-5 lg:-top-6 -rotate-6"
             />
+          </h1>
+          <h2 className="font-serif text-white/60 text-xl lg:text-2xl text-center">
+            Find hidden gems from 180k Spaces
           </h2>
+        </header>
+        <Shuffler space={space} nextSpace={nextSpace} />
       </div>
     </main>
   );

components/animate/card.tsx ADDED Viewed

	@@ -0,0 +1,67 @@

+import {
+  motion,
+  useMotionValue,
+  useTransform,
+  AnimatePresence,
+} from "framer-motion";
+import { useState } from "react";
+export const Card = ({ children, drag, index, setIndex, front }: any) => {
+  const [exitX, setExitX] = useState(0);
+  const x = useMotionValue(0);
+  const scale = useTransform(x, [-150, 0, 150], [0.5, 1, 0.5]);
+  const rotate = useTransform(x, [-150, 0, 150], [-45, 0, 45], {
+    clamp: false,
+  });
+  const variantsFrontCard = {
+    animate: { scale: 1, y: 0, opacity: 1 },
+    exit: (custom: number) => ({
+      x: custom,
+      opacity: 0,
+      scale: 0.5,
+      transition: { duration: 0.2 },
+    }),
+  };
+  const variantsBackCard = {
+    initial: { scale: 0, y: 105, opacity: 0 },
+    animate: { scale: 0.75, y: 30, opacity: 0 },
+  };
+  function handleDragEnd(_: any, info: any) {
+    if (info.offset.x < -100) {
+      setExitX(-250);
+      setIndex(index + 1);
+    }
+    if (info.offset.x > 100) {
+      setExitX(250);
+      setIndex(index + 1);
+    }
+  }
+  return (
+    <motion.div
+      style={{
+        position: "absolute",
+        width: "100%",
+        height: "100%",
+        top: 0,
+        x,
+        rotate,
+      }}
+      variants={front ? variantsFrontCard : variantsBackCard}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      custom={exitX}
+      transition={
+        front
+          ? { type: "spring", stiffness: 300, damping: 20 }
+          : { scale: { duration: 0.2 }, opacity: { duration: 0.4 } }
+      }
+    >
+      {children}
+    </motion.div>
+  );
+};

components/shuffler/button.tsx ADDED Viewed

	@@ -0,0 +1,13 @@

+import { Shuffle } from "lucide-react";
+export const ButtonShuffler = ({ onClick }: { onClick: () => void }) => {
+  return (
+    <button
+      className="bg-white/90 hover:bg-white transition-all duration-200 rounded-full text-xl flex items-center justify-center gap-3 text-black px-8 py-5 font-bold"
+      onClick={onClick}
+    >
+      <Shuffle size={28} />
+      Shuffle
+    </button>
+  );
+};

components/shuffler/index.tsx ADDED Viewed

	@@ -0,0 +1,54 @@

+"use client";
+import { useState } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { getSpace } from "@/app/actions";
+import { Space as SpaceProps } from "@/utils/types";
+import { Space } from "@/components/space";
+import { ButtonShuffler } from "./button";
+import { Card } from "@/components/animate/card";
+export const Shuffler = ({
+  space: initialSpace,
+  nextSpace: initialNextSpace,
+}: {
+  space: SpaceProps;
+  nextSpace: SpaceProps;
+}) => {
+  const [index, setIndex] = useState(0);
+  const [space, setSpace] = useState<SpaceProps>(
+    JSON.parse(JSON.stringify(initialSpace))
+  );
+  const [nextSpace, setNextSpace] = useState<SpaceProps>(
+    JSON.parse(JSON.stringify(initialNextSpace))
+  );
+  return (
+    <motion.div className="grid grid-cols-1 gap-10 relative">
+      <div className="relative w-full h-[350px]">
+        <AnimatePresence initial={false}>
+          <Card key={index + 1} front={false}>
+            <Space space={nextSpace} />
+          </Card>
+          <Card key={index} front={true} index={index} setIndex={setIndex}>
+            <Space space={space} />
+          </Card>
+        </AnimatePresence>
+      </div>
+      <div className="w-4 h-[1px] bg-white/50 mx-auto" />
+      <footer className="flex items-center justify-center">
+        <ButtonShuffler
+          onClick={() => {
+            getSpace().then((newSpace) => {
+              setSpace(nextSpace);
+              setNextSpace(newSpace);
+              setIndex(index + 1);
+            });
+          }}
+        />
+      </footer>
+    </motion.div>
+  );
+};

components/space/index.tsx ADDED Viewed

	@@ -0,0 +1,34 @@

+import Link from "next/link";
+import { ExternalLink } from "lucide-react";
+import { Space as SpaceProps } from "@/utils/types";
+import { SpaceAuthor } from "./sub/author";
+import { SpaceHeader } from "./sub/header";
+export const Space: React.FC<{ space: SpaceProps }> = ({ space }) => {
+  return (
+    <main className="w-full rounded-xl grid grid-cols-1 gap-3">
+      <SpaceHeader space={space} />
+      <div className="flex items-start justify-between">
+        <p className="text-[1.95rem] leading-[2rem] text-white/80 font-light">
+          {space?.title}
+        </p>
+        <Link
+          href={`https://huggingface.co/spaces/${space.id}`}
+          target="_blank"
+        >
+          <ExternalLink
+            size={24}
+            className="text-white/70 hover:text-blue-500"
+          />
+        </Link>
+      </div>
+      <SpaceAuthor author={space?.authorData} />
+      {space?.shortDescription && (
+        <p className="text-xl font-serif text-white/60 flex items-center justify-start gap-1.5 line-clamp-1">
+          Explore thousands of community trained LoRAs.
+        </p>
+      )}
+    </main>
+  );
+};

components/space/sub/author.tsx ADDED Viewed

	@@ -0,0 +1,22 @@

+import { SpaceAuthorData } from "@/utils/types";
+import Image from "next/image";
+export const SpaceAuthor = ({ author }: { author: SpaceAuthorData }) => {
+  return (
+    <p className="text-xl font-serif text-white/60 flex items-center justify-start gap-1.5">
+      by
+      <Image
+        src={
+          author.avatarUrl?.startsWith("http")
+            ? author.avatarUrl
+            : `https://huggingface.co${author.avatarUrl}`
+        }
+        width={44}
+        height={44}
+        alt={`${author.fullname}'s avatar from Hugging Face`}
+        className="rounded-full w-6 h-6"
+      />
+      {author.name}
+    </p>
+  );
+};

components/space/sub/header.tsx ADDED Viewed

	@@ -0,0 +1,26 @@

+import { Heart } from "lucide-react";
+import { Space } from "@/utils/types";
+export const SpaceHeader = ({ space }: { space: Space }) => {
+  return (
+    <figure className="relative z-[1] h-[200px] px-6 py-4 mb-4">
+      <div
+        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} absolute w-full top-0 left-0 h-full rounded-2xl -z-[1]`}
+      />
+      <div
+        className={`bg-gradient-to-br ${space.colorFrom} ${space.colorTo} -z-[1] blur-lg opacity-50 h-full w-full absolute top-0 left-0`}
+      />
+      <div className="flex items-center justify-between w-full relative">
+        <p>tags</p>
+        <p className="flex items-center justify-end gap-1 text-sm text-white">
+          <Heart size={14} />
+          {space.likes}
+        </p>
+      </div>
+      <p className="absolute top-0 left-0 h-full w-full flex items-center justify-center opacity-90 text-7xl text-center whitespace-nowrap truncate">
+        {space.emoji}
+      </p>
+    </figure>
+  );
+};

components/theme-provider.tsx ADDED Viewed

	@@ -0,0 +1,9 @@

+"use client";
+import * as React from "react";
+import { ThemeProvider as NextThemesProvider } from "next-themes";
+import { type ThemeProviderProps } from "next-themes/dist/types";
+export function ThemeProvider({ children, ...props }: ThemeProviderProps) {
+  return <NextThemesProvider {...props}>{children}</NextThemesProvider>;
+}

components/toggle-mode.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import { useTheme } from "next-themes";
+export const ToggleMode = () => {
+  const { setTheme } = useTheme();
+  return (
+    <div>
+      <button onClick={() => setTheme("light")}>Light Mode</button>
+      <button onClick={() => setTheme("dark")}>Dark Mode</button>
+    </div>
+  );
+};

images/cards.svg ADDED Viewed

next.config.mjs CHANGED Viewed

@@ -1,4 +1,13 @@
 /** @type {import('next').NextConfig} */
-const nextConfig = {};
 export default nextConfig;

 /** @type {import('next').NextConfig} */
+const nextConfig = {
+  images: {
+    remotePatterns: [
+      {
+        protocol: "https",
+        hostname: "**"
+      }
+    ],
+  },
+};
 export default nextConfig;

package-lock.json CHANGED Viewed

@@ -8,7 +8,11 @@
       "name": "spaces-randomizer",
       "version": "0.1.0",
       "dependencies": {
         "next": "14.2.6",
         "react": "^18",
         "react-dom": "^18"
       },
@@ -2082,6 +2086,30 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
@@ -3057,6 +3085,14 @@
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true
     },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
@@ -3079,6 +3115,14 @@
         "node": ">=8.6"
       }
     },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -3198,6 +3242,15 @@
         }
       }
     },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

       "name": "spaces-randomizer",
       "version": "0.1.0",
       "dependencies": {
+        "framer-motion": "^11.3.29",
+        "lucide-react": "^0.429.0",
+        "mini-svg-data-uri": "^1.4.4",
         "next": "14.2.6",
+        "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18"
       },
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/framer-motion": {
+      "version": "11.3.29",
+      "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-11.3.29.tgz",
+      "integrity": "sha512-uyDuUOeOElJEA3kbkbyoTNEf75Jih1EUg0ouLKYMlGDdt/LaJPmO+FyOGAGxM2HwKhHcAoKFNveR5A8peb7yhw==",
+      "dependencies": {
+        "tslib": "^2.4.0"
+      },
+      "peerDependencies": {
+        "@emotion/is-prop-valid": "*",
+        "react": "^18.0.0",
+        "react-dom": "^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/is-prop-valid": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/fs.realpath": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
       "integrity": "sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==",
       "dev": true
     },
+    "node_modules/lucide-react": {
+      "version": "0.429.0",
+      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.429.0.tgz",
+      "integrity": "sha512-548DahFy7Ey+0OPlOyZ6ipnbGJzewv8gq2DxDrnAzWZ4RN4+3XyIwQXhD4AQvuREFjS1EnbAgOMaYB0VQyaK1g==",
+      "peerDependencies": {
+        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
+      }
+    },
     "node_modules/merge2": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz",
         "node": ">=8.6"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
         }
       }
     },
+    "node_modules/next-themes": {
+      "version": "0.3.0",
+      "resolved": "https://registry.npmjs.org/next-themes/-/next-themes-0.3.0.tgz",
+      "integrity": "sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==",
+      "peerDependencies": {
+        "react": "^16.8 || ^17 || ^18",
+        "react-dom": "^16.8 || ^17 || ^18"
+      }
+    },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

package.json CHANGED Viewed

@@ -9,18 +9,22 @@
     "lint": "next lint"
   },
   "dependencies": {
     "react": "^18",
-    "react-dom": "^18",
-    "next": "14.2.6"
   },
   "devDependencies": {
-    "typescript": "^5",
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
-    "eslint": "^8",
-    "eslint-config-next": "14.2.6"
   }
 }

     "lint": "next lint"
   },
   "dependencies": {
+    "framer-motion": "^11.3.29",
+    "lucide-react": "^0.429.0",
+    "mini-svg-data-uri": "^1.4.4",
+    "next": "14.2.6",
+    "next-themes": "^0.3.0",
     "react": "^18",
+    "react-dom": "^18"
   },
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
     "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.6",
     "postcss": "^8",
     "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }

{app → style}/globals.css RENAMED Viewed

File without changes

tailwind.config.ts CHANGED Viewed

@@ -1,10 +1,16 @@
 import type { Config } from "tailwindcss";
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -12,9 +18,40 @@ const config: Config = {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
       },
     },
   },
-  plugins: [],
 };
 export default config;

 import type { Config } from "tailwindcss";
+const svgToDataUri = require("mini-svg-data-uri");
+const {
+  default: flattenColorPalette,
+} = require("tailwindcss/lib/util/flattenColorPalette");
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./utils/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
         "gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
         "gradient-conic":
           "conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))",
+        "flashy": "linear-gradient(90deg, #2B90FF 0%, #861FFF 55.81%, #FF3270 93.33%, #FFD702 100%)",
       },
+      fontFamily: {
+        sans: ['var(--font-inter)'],
+        serif: ['var(--font-montserrat)'],
+      }
     },
   },
+  plugins: [
+    addVariablesForColors,
+    function ({ matchUtilities, theme }: any) {
+      matchUtilities(
+        {
+          "bg-grid-small": (value: string) => ({
+            backgroundImage: `url("${svgToDataUri(
+              `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="44" height="44" fill="none" stroke="${value}"><path d="M0 .5H31.5V32"/></svg>`
+            )}")`,
+          }),
+        },
+        { values: flattenColorPalette(theme("backgroundColor")), type: "color" }
+      );
+    },
+  ],
 };
+function addVariablesForColors({ addBase, theme }: any ) {
+  let allColors = flattenColorPalette(theme("colors"));
+  let newVars = Object.fromEntries(
+    Object.entries(allColors).map(([key, val]) => [`--${key}`, val])
+  );
+  addBase({
+    ":root": newVars,
+  });
+}
 export default config;

utils/network.ts ADDED Viewed

	@@ -0,0 +1,41 @@

+const COLORS = {
+  from: {
+    purple: "from-purple-500",
+    pink: "from-pink-500",
+    gray: "from-gray-700",
+    blue: "from-blue-500",
+    green: "from-green-500",
+    yellow: "from-yellow-500",
+    indigo: "from-indigo-500",
+  },
+  to: {
+    purple: "to-purple-500",
+    pink: "to-pink-500",
+    gray: "to-gray-700",
+    blue: "to-blue-500",
+    green: "to-green-500",
+    yellow: "to-yellow-500",
+    indigo: "to-indigo-500",
+  },
+};
+export const fetchSpaceRandomly = async () => {
+  const randomPage = Math.floor(Math.random() * 100) + 1;
+  const url = `https://huggingface.co/spaces-json?p=${randomPage}&runtime.stage=RUNNING&sort=trending`;
+  const response = await fetch(url);
+  const json = await response.json();
+  const spaces = json?.spaces;
+  if (!spaces) {
+    return null;
+  }
+  const randomIndex = Math.floor(Math.random() * spaces.length);
+  const space = {
+    ...spaces[randomIndex],
+    colorFrom: COLORS.from[spaces[randomIndex].colorFrom as keyof typeof COLORS.from] || COLORS.from.purple,
+    colorTo: COLORS.to[spaces[randomIndex].colorTo as keyof typeof COLORS.from] || COLORS.to.pink,
+  }
+  return space;
+}

utils/types.ts ADDED Viewed

	@@ -0,0 +1,25 @@

+export interface Space {
+  id: string;
+  name: string;
+  description: string;
+  likes: number;
+  author: string;
+  title: string,
+  emoji: string,
+  colorFrom: string,
+  colorTo: string,
+  pinned: boolean;
+  shortDescription?: string;
+  runtime: SpaceRuntime;
+  authorData: SpaceAuthorData;
+}
+export interface SpaceAuthorData {
+  avatarUrl: string;
+  fullname: string
+  name: string;
+}
+export interface SpaceRuntime {
+  stage: string;
+}