add banner grid

constantgillet · Feb 6, 2024 · fb8e4cc · fb8e4cc
1 parent 8cb524f
commit fb8e4cc
Show file tree

Hide file tree

Showing 2 changed files with 68 additions and 2 deletions.
diff --git a/app/routes/_app.app.tsx b/app/routes/_app.app.tsx
@@ -1,4 +1,4 @@
-import { Button } from "@radix-ui/themes";
+import { Button, Card, DropdownMenu, IconButton } from "@radix-ui/themes";
 import { Link } from "@remix-run/react";
 import { css, cx } from "styled-system/css";
 import { container } from "styled-system/patterns";
@@ -37,6 +37,7 @@ export default function AppHome() {
       <header
         className={css({
           borderBottom: "1px solid var(--gray-a5)",
+          backgroundColor: "var(--color-panel)",
           paddingY: "18px",
         })}
       >
@@ -75,9 +76,73 @@ export default function AppHome() {
               ))}
             </div>
           </div>
-          <div>right part</div>
+          <div>
+            <DropdownMenu.Root>
+              <DropdownMenu.Trigger>
+                <Button variant="ghost" size="2" color="gray">
+                  davendrix
+                  <IconButton
+                    radius="full"
+                    size={"1"}
+                    color="gray"
+                    variant="classic"
+                  >
+                    C
+                  </IconButton>
+                </Button>
+              </DropdownMenu.Trigger>
+              <DropdownMenu.Content align="end">
+                <DropdownMenu.Item shortcut="⌘ E">Settings</DropdownMenu.Item>
+                <DropdownMenu.Separator />
+                <DropdownMenu.Item>Logout</DropdownMenu.Item>
+              </DropdownMenu.Content>
+            </DropdownMenu.Root>
+          </div>
         </div>
       </header>
+      <div
+        className={css({
+          spaceY: "24px",
+        })}
+      >
+        <div
+          className={css({
+            h: "160px",
+            position: "relative",
+            borderBottom: "1px solid var(--gray-a4)",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          })}
+        >
+          <div className={cx(container())}>
+            <h1
+              className={css({
+                fontSize: "2xl",
+                fontWeight: "semibold",
+              })}
+            >
+              Home
+            </h1>
+          </div>
+
+          <div
+            className={css({
+              position: "absolute",
+              top: 0,
+              left: 0,
+              w: "full",
+              h: "full",
+              backgroundImage: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")`,
+              //background: `url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' fill='none' stroke='rgb(148 163 184 / 0.05)'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E")'%3E%3Cpath d='M0 .5h31.5V32'/%3E%3C/svg%3E)`,
+              maskImage: "linear-gradient(180deg,transparent,#000)",
+            })}
+          ></div>
+        </div>
+        <div className={container()}>
+          <Card>test</Card>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/panda.config.ts b/panda.config.ts
@@ -59,6 +59,7 @@ export default defineConfig({
             maxWidth: "1150px",
             marginX: "auto",
             paddingX: "4",
+            w: "100%",
           };
         },
       },