feat: custom scrollbar

zaida04 · Jan 21, 2024 · 9cc33b7 · 9cc33b7
1 parent 913e477
commit 9cc33b7
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 26 deletions.
diff --git a/bun.lockb b/bun.lockb
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
@@ -1,6 +1,7 @@
 ---
 import Layout from "./Layout.astro";
 import Navbar from "../components/nav/Navbar.tsx";
+import { Scrollbar } from "react-scrollbars-custom";
 
 interface Props {
     title: string;

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -6,6 +6,13 @@ import projects_data from "../data/projects.json";
 import PageLayout from "../layouts/PageLayout.astro";
 import ProjectCard from "../components/project/ProjectCard";
 import { Github, Mail } from "lucide-react";
+import { Scrollbar } from "react-scrollbars-custom";
+
+const project_sections: Record<string, keyof typeof projects_data> = {
+    "Websites & Fullstack": "sites",
+    "Backend & Bots": "backends",
+    Libraries: "libraries",
+};
 ---
 
 <PageLayout title="Zaid's Site">
@@ -52,32 +59,20 @@ import { Github, Mail } from "lucide-react";
         <h2>Featured Projects</h2>
 
         <div class="flex flex-col gap-4">
-            <h3>Websites & Fullstack</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.sites.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
-
-            <h3>Backend & Bots</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.backends.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
-
-            <h3>Libraries</h3>
-            <div class="flex flex-row flex-wrap gap-4">
-                {
-                    projects_data.libraries.map((project) => (
-                        <ProjectCard {...project} />
-                    ))
-                }
-            </div>
+            {
+                Object.entries(project_sections).map(
+                    ([title, json_section]) => (
+                        <>
+                            <h3>{title}</h3>
+                            <div class="flex flex-row gap-4 overflow-x-auto pb-4">
+                                {projects_data[json_section].map((project) => (
+                                    <ProjectCard {...project} />
+                                ))}
+                            </div>
+                        </>
+                    ),
+                )
+            }
         </div>
 
         <div id="competitions">

diff --git a/src/styles/globals.css b/src/styles/globals.css
@@ -30,4 +30,21 @@
     html {
         @apply overflow-y-scroll
     }
+
+    * {
+        scrollbar-width: auto;
+        scrollbar-color: #8f54a0 #ffffff;
+    }
+
+    *::-webkit-scrollbar {
+        @apply w-[12px];
+    }
+
+    *::-webkit-scrollbar-track {
+        @apply bg-white
+    }
+
+    *::-webkit-scrollbar-thumb {
+        @apply bg-slate-800 border border-white;
+    }
 }