feat(docs): refresh homepage UI in grid

Signed-off-by: Quentin Guidée <[email protected]>
vertex-center · Mar 14, 2024 · 5d951de · 5d951de
1 parent d479453
commit 5d951de
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 36 deletions.
diff --git a/docs/src/pages/All/AllDocs.module.sass b/docs/src/pages/All/AllDocs.module.sass
@@ -17,16 +17,3 @@
     display: flex
     flex-direction: column
     gap: 20px
-
-.grid
-    display: grid
-    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr))
-    gap: 15px
-
-    & > *
-        border-radius: 12px
-        border: 1px solid colors.$bg-tertiary
-
-    @media (max-width: 900px)
-        grid-template-columns: 1fr
-        gap: 10px
diff --git a/docs/src/pages/All/AllDocs.tsx b/docs/src/pages/All/AllDocs.tsx
@@ -1,15 +1,16 @@
 import {
     ListDescription,
-    ListIcon,
     ListInfo,
-    ListItem,
     ListTitle,
     Logo,
-    MaterialIcon,
     Title,
 } from "@vertex-center/components";
 import styles from "./AllDocs.module.sass";
 import { useNavigate } from "react-router-dom";
+import { Grid } from "@vertex-center/components/lib/components/Grid/Grid.tsx";
+import { Card } from "@vertex-center/components/lib/components/Card/Card.tsx";
+import { Vertical } from "@vertex-center/components/lib/components/Layout/Layout.tsx";
+import { Graph } from "@phosphor-icons/react";
 
 const docs = import.meta.glob("/{docs,api}/*/{doc,api}.json", {
     eager: true,
@@ -26,35 +27,34 @@ function DocsCategory({ category, title }: DocsCategoryProps) {
     return (
         <div className={styles.category}>
             <Title variant="h2">{title}</Title>
-            <div className={styles.grid}>
+            <Grid className={styles.grid} columnSize={300}>
                 {Object.entries(docs).map(([path, doc]: [string, any]) => {
                     if (!path.startsWith("/" + category + "/")) return null;
                     let slug = path.split("/")[2];
                     if (category === "api") slug = "api-" + slug;
                     if (doc.version) slug = slug + "/" + doc.version;
                     if (doc.main) slug = slug + "/" + doc.main;
                     return (
-                        <ListItem
-                            key={slug}
-                            onClick={() => navigate(`/${slug}`)}
-                        >
-                            <ListIcon>
-                                {category === "docs" ? (
-                                    <Logo />
-                                ) : (
-                                    <MaterialIcon icon="api" />
-                                )}
-                            </ListIcon>
-                            <ListInfo>
-                                <ListTitle>{doc.title}</ListTitle>
-                                <ListDescription>
-                                    {doc.description}
-                                </ListDescription>
-                            </ListInfo>
-                        </ListItem>
+                        <Card key={slug} onClick={() => navigate(`/${slug}`)}>
+                            <Vertical gap={20}>
+                                <div>
+                                    {category === "docs" ? (
+                                        <Logo />
+                                    ) : (
+                                        <Graph size={32} />
+                                    )}
+                                </div>
+                                <ListInfo>
+                                    <ListTitle>{doc.title}</ListTitle>
+                                    <ListDescription>
+                                        {doc.description}
+                                    </ListDescription>
+                                </ListInfo>
+                            </Vertical>
+                        </Card>
                     );
                 })}
-            </div>
+            </Grid>
         </div>
     );
 }