From 92b414afb1a3e566a738b60e8231a57cda93fc1a Mon Sep 17 00:00:00 2001 From: Juan Di Toro Date: Thu, 7 Mar 2024 18:26:11 +0100 Subject: [PATCH] feat: add dashboard layout --- app/components/dashboard-layout.tsx | 166 ++++++++++++++++++++++++++++ app/components/ui/button.tsx | 4 +- app/routes/dashboard.tsx | 14 +++ app/routes/login.tsx | 2 +- app/tailwind.css | 4 +- tailwind.config.ts | 4 + 6 files changed, 190 insertions(+), 4 deletions(-) create mode 100644 app/components/dashboard-layout.tsx create mode 100644 app/routes/dashboard.tsx diff --git a/app/components/dashboard-layout.tsx b/app/components/dashboard-layout.tsx new file mode 100644 index 0000000..dcc8c60 --- /dev/null +++ b/app/components/dashboard-layout.tsx @@ -0,0 +1,166 @@ +import { Button } from "~/components/ui/button" +import logoPng from "~/images/lume-logo.png?url" +import lumeColorLogoPng from "~/images/lume-color-logo.png?url" +import discordLogoPng from "~/images/discord-logo.png?url" +import { Link } from "@remix-run/react" + +export const DashboardLayout = ({ children }: React.PropsWithChildren<{}>) => { + return ( +
+
+ Lume logo + + + +

Freedom

+

Privacy

+

Ownership

+ + +
+ + {children} + +
+
    +
  • + + + +
    • +
  • + + + +
    • +
+
+
+ ) +} + +const NavigationButton = ({ children }: React.PropsWithChildren) => { + return ( + + ) +} + +const ClockIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +const CircleLockIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +const DriveIcon = ({ className }: { className?: string }) => { + return ( + + ) +} + +const CloudUploadIcon = ({ className }: { className?: string }) => { + return ( + + ) +} diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx index e3ccfd0..1ce827f 100644 --- a/app/components/ui/button.tsx +++ b/app/components/ui/button.tsx @@ -16,8 +16,8 @@ const buttonVariants = cva( outline: "border border-input bg-background shadow-sm hover:bg-primary-2/5", secondary: - "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", - ghost: "hover:bg-accent hover:text-accent-foreground", + "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80", + ghost: "hover:bg-secondary-1 hover:text-secondary-1-foreground text-primary-2", link: "text-primary-1 underline-offset-4 hover:underline", }, size: { diff --git a/app/routes/dashboard.tsx b/app/routes/dashboard.tsx new file mode 100644 index 0000000..735e4d0 --- /dev/null +++ b/app/routes/dashboard.tsx @@ -0,0 +1,14 @@ +import { DashboardLayout } from "~/components/dashboard-layout" + +export default function Dashboard() { + const isLogged = true + if (!isLogged) { + window.location.href = "/login" + } + + return ( + +
Hello
+ + ) +} diff --git a/app/routes/login.tsx b/app/routes/login.tsx index 9d149f9..887d15a 100644 --- a/app/routes/login.tsx +++ b/app/routes/login.tsx @@ -22,7 +22,7 @@ export default function Login() { const hash = location.hash return ( -
+
Lume logo
diff --git a/app/tailwind.css b/app/tailwind.css index 70b1150..4c87031 100644 --- a/app/tailwind.css +++ b/app/tailwind.css @@ -20,7 +20,9 @@ --primary-1-foreground: 240 50% 9%; --secondary: 0 0% 96.1%; + --secondary-1: 242 52% 9%; --secondary-foreground: 0 0% 9%; + --secondary-1-foreground: 0 0% 100%; --muted: 0 0% 96.1%; --muted-foreground: 0 0% 45.1%; @@ -75,6 +77,6 @@ @apply border-border; } body { - @apply bg-background text-foreground font-sans; + @apply bg-background text-foreground font-sans h-screen; } } \ No newline at end of file diff --git a/tailwind.config.ts b/tailwind.config.ts index 76d24bf..24252ad 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -40,6 +40,10 @@ const config = { DEFAULT: "hsl(var(--secondary))", foreground: "hsl(var(--secondary-foreground))" }, + "secondary-1": { + DEFAULT: "hsl(var(--secondary-1))", + foreground: "hsl(var(--secondary-1-foreground))" + }, destructive: { DEFAULT: "hsl(var(--destructive))", foreground: "hsl(var(--destructive-foreground))"