Spaces:

enzostvs
/

zero-gpu-spaces

Running

App Files Files Community

enzostvs HF staff commited on Jul 3, 2024

Commit

900e2e7

1 Parent(s): a2f4024

add dark theme

Browse files

Files changed (10) hide show

app/layout.tsx +4 -1
app/page.tsx +0 -1
assets/globals.css +1 -1
components/sort.tsx +7 -5
components/spaces/details.tsx +2 -2
components/spaces/index.tsx +26 -8
components/spaces/space.tsx +7 -7
package-lock.json +10 -0
package.json +1 -0
tailwind.config.ts +1 -0

app/layout.tsx CHANGED Viewed

@@ -1,5 +1,6 @@
 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
 import "@/assets/globals.css";
 const inter = Inter({ subsets: ["latin"] });
@@ -15,7 +16,9 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
-      <body className={inter.className}>{children}</body>
     </html>
   );
 }

 import type { Metadata } from "next";
 import { Inter } from "next/font/google";
+import { ThemeProvider } from "next-themes";
 import "@/assets/globals.css";
 const inter = Inter({ subsets: ["latin"] });
 }>) {
   return (
     <html lang="en">
+      <body className={inter.className}>
+        <ThemeProvider attribute="class">{children}</ThemeProvider>
+      </body>
     </html>
   );
 }

app/page.tsx CHANGED Viewed

@@ -1,7 +1,6 @@
 import { fetchAllPages } from "@/utils";
 import { SpaceProps } from "@/utils/type";
 import { Spaces } from "@/components/spaces";
-import { Suspense } from "react";
 export const revalidate = 120;

 import { fetchAllPages } from "@/utils";
 import { SpaceProps } from "@/utils/type";
 import { Spaces } from "@/components/spaces";
 export const revalidate = 120;

assets/globals.css CHANGED Viewed

@@ -3,7 +3,7 @@
 @tailwind utilities;
 body {
-  @apply bg-gray-100 overflow-hidden;
 }
 @layer utilities {

 @tailwind utilities;
 body {
+  @apply bg-gray-100 overflow-hidden dark:bg-slate-950;
 }
 @layer utilities {

components/sort.tsx CHANGED Viewed

@@ -8,12 +8,13 @@ interface Props {
 }
 export const Sort = ({ value, onChange }: Props) => {
   return (
-    <div className="flex items-center justify-center border-[3px] rounded-full border-gray-50 drop-shadow-sm bg-gray-100 ring-[1px] ring-gray-200 gap-1">
       <button
         className={classNames(
-          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 flex items-center justify-center gap-2",
           {
-            "bg-black hover:!bg-black text-white": value === "likes",
           }
         )}
         onClick={() => onChange("likes")}
@@ -23,9 +24,10 @@ export const Sort = ({ value, onChange }: Props) => {
       </button>
       <button
         className={classNames(
-          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 flex items-center justify-center gap-2",
           {
-            "bg-black hover:!bg-black text-white": value === "createdAt",
           }
         )}
         onClick={() => onChange("createdAt")}

 }
 export const Sort = ({ value, onChange }: Props) => {
   return (
+    <div className="flex items-center justify-center border-[3px] rounded-full border-gray-50 drop-shadow-sm bg-gray-100 dark:bg-slate-900 dark:border-slate-800 ring-[1px] ring-gray-200 dark:ring-slate-700 gap-1">
       <button
         className={classNames(
+          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
           {
+            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
+              value === "likes",
           }
         )}
         onClick={() => onChange("likes")}
       </button>
       <button
         className={classNames(
+          "rounded-full pl-3 pr-4 py-2.5 transition-all duration-200 font-semibold text-xs hover:bg-gray-200/70 dark:hover:bg-gray-700/70 flex items-center justify-center gap-2",
           {
+            "bg-black hover:!bg-black dark:bg-slate-950 dark:hover:!bg-slate-950 text-white":
+              value === "createdAt",
           }
         )}
         onClick={() => onChange("createdAt")}

components/spaces/details.tsx CHANGED Viewed

@@ -29,8 +29,8 @@ export const Details: React.FC<{ space: SpaceProps }> = ({ space }) => {
   }, [space]);
   return (
-    <div className="border border-gray-200 shadow-md bg-white p-4 rounded-lg absolute -bottom-2 translate-y-full left-0 z-[99999]">
-      <p className="text-sm text-gray-600 flex items-center justify-start gap-1 font-medium">
         This Space is currently using{" "}
         <span className="border border-emerald-200 bg-emerald-50 font-medium text-emerald-500 flex items-center justify-center gap-1 max-w-max rounded-md px-1 py-0.5 text-xs">
           {gpuNumber} <GpuIcon />

   }, [space]);
   return (
+    <div className="border border-gray-200 shadow-md bg-white dark:bg-slate-900 dark:border-slate-800 p-4 rounded-lg absolute -bottom-2 translate-y-full left-0 z-[99999]">
+      <p className="text-sm text-gray-600 dark:text-slate-500 flex items-center justify-start gap-1 font-medium">
         This Space is currently using{" "}
         <span className="border border-emerald-200 bg-emerald-50 font-medium text-emerald-500 flex items-center justify-center gap-1 max-w-max rounded-md px-1 py-0.5 text-xs">
           {gpuNumber} <GpuIcon />

components/spaces/index.tsx CHANGED Viewed

@@ -1,7 +1,9 @@
 "use client";
-import { useState } from "react";
-import { useUpdateEffect } from "react-use";
 import { useRouter } from "next/navigation";
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
@@ -10,10 +12,12 @@ import { Space } from "@/components/spaces/space";
 import { Sort } from "@/components/sort";
 export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
   const [selectedGpu, setSelectedGpu] = useState<string | undefined>(undefined);
   const router = useRouter();
   const [sort, setSort] = useState<"likes" | "createdAt">("likes");
-  const [elementsInView, setElementsInView] = useState<string[]>([]);
   useUpdateEffect(() => {
     router.push("/?sort=" + sort);
@@ -32,14 +36,28 @@ export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
       <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
         <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
           <div>
-            <div className="mb-6 font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 px-3 py-2 transition-all duration-300">
-              <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
-              Browse {spaces.length} spaces
             </div>
-            <h1 className="font-extrabold text-3xl text-black">
               Zero GPU Spaces
             </h1>
-            <p className="text-neutral-500 font-regular text-base">
               Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
             </p>
           </div>

 "use client";
+import { useEffect, useState } from "react";
+import { useLocalStorage, useUpdateEffect } from "react-use";
 import { useRouter } from "next/navigation";
+import { useTheme } from "next-themes";
+import { MdDarkMode, MdLightMode } from "react-icons/md";
 import { SpaceProps } from "@/utils/type";
 import { SpaceIcon } from "@/components/space_icon";
 import { Sort } from "@/components/sort";
 export const Spaces: React.FC<{ spaces: SpaceProps[] }> = ({ spaces }) => {
+  const { systemTheme, theme, setTheme } = useTheme();
+  const currentTheme = theme === "system" ? systemTheme : theme;
   const [selectedGpu, setSelectedGpu] = useState<string | undefined>(undefined);
   const router = useRouter();
   const [sort, setSort] = useState<"likes" | "createdAt">("likes");
   useUpdateEffect(() => {
     router.push("/?sort=" + sort);
       <div className="w-full container px-6 py-10 lg:py-20 mx-auto space-y-10 lg:space-y-14">
         <header className="max-w-5xl mx-auto w-full max-lg:flex-col items-start flex lg:items-end lg:justify-between gap-4">
           <div>
+            <div className="mb-6 flex items-center justify-start gap-2.5">
+              <button
+                className="flex items-center justify-center w-9 h-9 rounded-full border border-gray-200 bg-gray-50 dark:bg-slate-900 dark:border-slate-800 transition-all duration-200 hover:brightness-125"
+                onClick={() =>
+                  theme == "dark" ? setTheme("light") : setTheme("dark")
+                }
+              >
+                {theme === "light" ? (
+                  <MdDarkMode className="w-6 h-6 text-purple-600" />
+                ) : (
+                  <MdLightMode className="w-6 h-6 text-amber-500" />
+                )}
+              </button>
+              <div className="font-regular text-xs text-center max-w-max rounded-full border-gray-200 bg-gray-50 border text-gray-700 dark:text-slate-400 dark:bg-slate-900 dark:border-slate-800 px-3 py-2 transition-all duration-300">
+                <SpaceIcon className="inline-block w-4 h-4 mr-2 drop-shadow-lg" />
+                Browse {spaces.length} spaces
+              </div>
             </div>
+            <h1 className="font-extrabold text-3xl text-black dark:text-slate-100">
               Zero GPU Spaces
             </h1>
+            <p className="text-neutral-500 font-regular text-base dark:text-slate-300">
               Discover spaces with zero GPU usage on 🤗 Hugging Face Spaces.
             </p>
           </div>

components/spaces/space.tsx CHANGED Viewed

@@ -1,8 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
 import { TiHeartFullOutline } from "react-icons/ti";
-import { FiChevronRight } from "react-icons/fi";
-import classNames from "classnames";
 import { SpaceProps } from "@/utils/type";
 import { GpuIcon } from "../gpu_icon";
@@ -18,16 +16,18 @@ export const Space: React.FC<Props> = ({ space, selected, onSelect }) => {
     <Link
       href={`https://huggingface.co/spaces/${space.id}`}
       target="_blank"
-      className="space relative hover:z-40 bg-gray-50 border border-gray-200 px-6 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-amber-400 hover:shadow-xl hover:shadow-black/5 group"
       data-space-id={space.id}
       onMouseEnter={() => onSelect?.(space.id)}
       onMouseLeave={() => onSelect?.(space.id)}
     >
       <header className="flex items-center justify-between gap-5">
         <div>
-          <h2 className="font-semibold text-black">{space?.title}</h2>
           {space.shortDescription && (
-            <p className="text-gray-500 text-xs mt-0.5 line-clamp-1">
               {space.shortDescription}
             </p>
           )}
@@ -48,7 +48,7 @@ export const Space: React.FC<Props> = ({ space, selected, onSelect }) => {
               className="rounded-full w-4 h-4"
             />
             <div>
-              <p className="text-gray-500 text-xs font-regular">
                 {space.authorData.name}
               </p>
             </div>
@@ -56,7 +56,7 @@ export const Space: React.FC<Props> = ({ space, selected, onSelect }) => {
         </div>
         <div className="space-y-3 flex flex-col items-end">
           <div
-            className="rounded-full truncate min-w-[2.5rem] min-h-[2.5rem] max-w-[2.5rem] max-h-[2.5rem] overflow-hidden flex items-center justify-center bg-gradient-to-br from-blue-500 to-red-500 border-[2px] border-white ring-1 ring-gray-200"
             style={{
               // @ts-ignore
               "--tw-gradient-from": `${space.colorFrom} var(--tw-gradient-to-position)`,

 import Link from "next/link";
 import Image from "next/image";
 import { TiHeartFullOutline } from "react-icons/ti";
 import { SpaceProps } from "@/utils/type";
 import { GpuIcon } from "../gpu_icon";
     <Link
       href={`https://huggingface.co/spaces/${space.id}`}
       target="_blank"
+      className="space relative hover:z-40 bg-gray-50 border border-gray-200 dark:bg-slate-900 dark:border-slate-800 px-6 py-4 rounded-xl transition-all duration-300 hover:-translate-y-1.5 hover:border-amber-400 hover:shadow-xl hover:shadow-black/5 group"
       data-space-id={space.id}
       onMouseEnter={() => onSelect?.(space.id)}
       onMouseLeave={() => onSelect?.(space.id)}
     >
       <header className="flex items-center justify-between gap-5">
         <div>
+          <h2 className="font-semibold text-black dark:text-slate-100">
+            {space?.title}
+          </h2>
           {space.shortDescription && (
+            <p className="text-gray-500 dark:text-slate-400 text-xs mt-0.5 line-clamp-1">
               {space.shortDescription}
             </p>
           )}
               className="rounded-full w-4 h-4"
             />
             <div>
+              <p className="text-gray-500 dark:text-slate-400 text-xs font-regular">
                 {space.authorData.name}
               </p>
             </div>
         </div>
         <div className="space-y-3 flex flex-col items-end">
           <div
+            className="rounded-full truncate min-w-[2.5rem] min-h-[2.5rem] max-w-[2.5rem] max-h-[2.5rem] overflow-hidden flex items-center justify-center bg-gradient-to-br from-blue-500 to-red-500 border-[2px] border-white ring-1 ring-gray-200 dark:border-slate-900 dark:ring-slate-700"
             style={{
               // @ts-ignore
               "--tw-gradient-from": `${space.colorFrom} var(--tw-gradient-to-position)`,

package-lock.json CHANGED Viewed

@@ -10,6 +10,7 @@
       "dependencies": {
         "classnames": "^2.5.1",
         "next": "14.2.3",
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.1.0",
@@ -3264,6 +3265,15 @@
         }
       }
     },
     "node_modules/next/node_modules/postcss": {
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",

       "dependencies": {
         "classnames": "^2.5.1",
         "next": "14.2.3",
+        "next-themes": "^0.3.0",
         "react": "^18",
         "react-dom": "^18",
         "react-icons": "^5.1.0",
         }
       }
     },
+    "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

@@ -11,6 +11,7 @@
   "dependencies": {
     "classnames": "^2.5.1",
     "next": "14.2.3",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.1.0",

   "dependencies": {
     "classnames": "^2.5.1",
     "next": "14.2.3",
+    "next-themes": "^0.3.0",
     "react": "^18",
     "react-dom": "^18",
     "react-icons": "^5.1.0",

tailwind.config.ts CHANGED Viewed

@@ -1,6 +1,7 @@
 import type { Config } from "tailwindcss";
 const config: Config = {
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",

 import type { Config } from "tailwindcss";
 const config: Config = {
+  darkMode: "class",
   content: [
     "./pages/**/*.{js,ts,jsx,tsx,mdx}",
     "./components/**/*.{js,ts,jsx,tsx,mdx}",