Add arrows to cards

hackclub · Jan 17, 2025 · 3804439 · 3804439
1 parent 99ce6c3
commit 3804439
Show file tree

Hide file tree

Showing 3 changed files with 34 additions and 6 deletions.
diff --git a/components/FancyCard.js b/components/FancyCard.js
@@ -13,6 +13,7 @@ export default function FancyCard({
     background,
     titleColor,
     descriptionColor,
+    arrowColor,
     name,
     description,
     img,
@@ -95,9 +96,26 @@ export default function FancyCard({
                   }
                 }
               }
-            })
+            }),
+            overflow: "hidden",
           }}
         >
+          <Box
+            sx={{
+              position: 'absolute',
+              top: 2,
+              right: 2,
+              opacity: 0.3,
+              fontSize: [1, '16px', '20px']
+            }}
+          >
+            <Icon
+              glyph="external"
+              size={32}
+              color={arrowColor || "#E9E9E9"}
+              className="icon"
+            />
+          </Box>
           <Box
             className="more"
             sx={{

diff --git a/manifest.js b/manifest.js
@@ -40,6 +40,7 @@ export default [
         background: "#FFF1DE",
         titleColor: "#4F2A0E",
         descriptionColor: "#4F2A0E",
+        arrowColor: "#ba9d75",
         external: true,
         url: "https://hack.club/fraps",
         fancy: true,
@@ -107,6 +108,7 @@ export default [
         background: "#b2daef",
         titleColor: "#137d88",
         descriptionColor: "#137d88",
+        arrowColor: "#598eaa",
         external: true,
         url: "https://hackapet.hackclub.dev/",
         fancy: true,
@@ -118,6 +120,7 @@ export default [
         background: "#ffffff",
         titleColor: "#83583c",
         descriptionColor: "#b19065",
+        arrowColor: "#9a9a9a",
         external: true,
         url: "https://bakebuild.hackclub.com/",
         fancy: true,
@@ -129,6 +132,7 @@ export default [
         background: "#e4e4e4",
         titleColor: "#6d6d6d",
         descriptionColor: "#444444",
+        arrowColor: "#9a9a9a",
         external: true,
         url: "https://bakebuild.hackclub.com/",
         fancy: true,
@@ -162,6 +166,7 @@ export default [
         background: "#FFFFFF",
         titleColor: "#000000",
         descriptionColor: "#000000",
+        arrowColor: "#9a9a9a",
         external: true,
         url: "https://saycheese.hackclub.com/",
         fancy: true,
@@ -202,6 +207,7 @@ export default [
         background: "#ffffff",
         titleColor: "#17171d",
         descriptionColor: "#17171d", 
+        arrowColor: "#9a9a9a",
         external: true,
         url: "https://github.com/hackclub/some-assembly-required",
         fancy: true,
@@ -213,6 +219,7 @@ export default [
         background: "#ffffff",
         titleColor: "#17171d",
         descriptionColor: "#17171d", 
+        arrowColor: "#9a9a9a",
         external: true,
         url: "https://cpu.land/",
         fancy: true,
@@ -259,6 +266,7 @@ export default [
         background: "#e9e9e9",
         titleColor: "#1f2d3d",
         descriptionColor: "#1f2d3d",
+        arrowColor: "#7f7f7f",
         external: true,
         url: "https://hackclub.app/",
         fancy: true,

diff --git a/pages/[slug].js b/pages/[slug].js
@@ -92,10 +92,12 @@ export default function Index({ everything = [], menu, source }) {
   }
 
   const [categories, setCategories] = useState([])
-  const addCategory = category => {
-    setCategories([...categories, category])
+  const selectCategory = category => {
+    // this code is still written for multiple categories to be selected at once, but only one is selectable at a time
+    setCategories([category])
+    console.log("selecting", category, categories)
     router.replace(
-      buildRoute({ categories: [...categories, category], query }),
+      buildRoute({ categories: [category], query }),
       undefined,
       {
         ...(router.query.slug === 'home' && { shallow: true }),
@@ -268,7 +270,7 @@ export default function Index({ everything = [], menu, source }) {
                 onClick={() =>
                   categories.includes(category.category)
                     ? removeCategory(category.category)
-                    : addCategory(category.category)
+                    : selectCategory(category.category)
                 }
                 key={idx}
                 sx={{
@@ -354,7 +356,7 @@ export default function Index({ everything = [], menu, source }) {
                 onClick={() =>
                   categories.includes(category.category)
                     ? removeCategory(category.category)
-                    : addCategory(category.category)
+                    : selectCategory(category.category)
                 }
                 key={idx}
                 sx={{