add code example

haaarshsingh · Jul 18, 2024 · fe6332d · fe6332d
1 parent 8130d9b
commit fe6332d
Show file tree

Hide file tree

Showing 28 changed files with 648 additions and 184 deletions.
diff --git a/apps/examples/app/layout.tsx b/apps/examples/app/layout.tsx
@@ -5,6 +5,6 @@ import { FC, ReactNode } from "react";
 
 export default (({ children }) => (
   <html lang="en" suppressHydrationWarning>
-    <body className={clsx("bg-slate-50")}>{children}</body>
+    <body className={clsx("bg-neutral-50")}>{children}</body>
   </html>
 )) as FC<{ children: ReactNode }>;
diff --git a/apps/web/app/globals.css b/apps/web/app/globals.css
@@ -2,6 +2,32 @@
 @tailwind components;
 @tailwind utilities;
 
+:root {
+  --sh-identifier: #242424;
+  --sh-keyword: #f47067;
+  --sh-string: #00a99a;
+  --sh-class: #8d85ff;
+  --sh-property: #4e8fdf;
+  --sh-entity: #66adff;
+  --sh-jsxliterals: #bf7db6;
+  --sh-sign: #7c7c7c;
+  --sh-comment: #7c7c7c;
+}
+
+:root.dark {
+  --sh-identifier: #e6e6e6;
+
+  .dashed {
+    background: repeating-linear-gradient(
+      45deg,
+      #262626 0px,
+      #262626 6px,
+      transparent 6px,
+      transparent 9px
+    );
+  }
+}
+
 html {
   scroll-behavior: smooth !important;
 }
@@ -45,7 +71,6 @@ h3,
 h4,
 p,
 a,
-span,
 button,
 input,
 li {

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -117,7 +117,7 @@ export default (({ children }) => (
         inter.variable,
         sohne.variable,
         fira_code.variable,
-        "bg-slate-50 dark:bg-slate-950",
+        "bg-neutral-50 dark:bg-neutral-950",
       )}
     >
       <Providers>{children}</Providers>

diff --git a/apps/web/app/not-found.tsx b/apps/web/app/not-found.tsx
@@ -1,6 +1,6 @@
 export default () => (
   <main className="flex h-screen items-center justify-center">
-    <h1 className="text-9xl font-bold text-slate-950 dark:text-slate-50">
+    <h1 className="text-9xl font-bold text-neutral-950 dark:text-neutral-50">
       404
     </h1>
   </main>

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,3 +1,4 @@
+import Cursor from "../components/Cursor";
 import Demo from "../components/Demo";
 import Footer from "../components/Footer";
 import Hero from "../components/Hero";
@@ -9,5 +10,6 @@ export default () => (
     <Hero />
     <Demo />
     <Footer />
+    <Cursor />
   </>
 );
diff --git a/apps/web/app/providers.tsx b/apps/web/app/providers.tsx
@@ -2,6 +2,7 @@
 
 import { useEffect, useState, type FC, type ReactNode } from "react";
 import { ThemeProvider } from "next-themes";
+import { CursorProvider } from "react-pointers";
 
 export default (({ children }) => {
   const [mounted, setMounted] = useState(false);
@@ -11,7 +12,7 @@ export default (({ children }) => {
 
   return (
     <ThemeProvider defaultTheme="system" enableSystem attribute="class">
-      {children}
+      <CursorProvider>{children}</CursorProvider>
     </ThemeProvider>
   );
 }) as FC<{ children: ReactNode }>;
diff --git a/apps/web/components/Cursor.tsx b/apps/web/components/Cursor.tsx
@@ -0,0 +1,26 @@
+"use client";
+
+import Image from "next/image";
+import { Cursor, CursorProps } from "react-pointers";
+
+export default () => {
+  const props: CursorProps = {
+    default: { cursor: <PixelArtDefault /> },
+    pointer: { cursor: <PixelArtPointer />, query: ["button", "a"] },
+    wait: { cursor: <PixelArtLoading />, query: [".loading"] },
+  };
+
+  return <Cursor {...props} />;
+};
+
+const PixelArtDefault = () => (
+  <Image width={24} height={24} src="/cursors/pixel-art/default.png" alt="" />
+);
+
+const PixelArtPointer = () => (
+  <Image width={24} height={24} src="/cursors/pixel-art/pointer.png" alt="" />
+);
+
+const PixelArtLoading = () => (
+  <Image width={24} height={24} src="/cursors/pixel-art/loading.png" alt="" />
+);