From 14e8be1fd0dc5466ed9d50f7500b2b7ed2af25fa Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Mon, 23 Sep 2024 22:16:30 +0530 Subject: [PATCH 1/6] Login --- package.json | 6 +- pnpm-lock.yaml | 106 ++++++++++++ src/components/nav/index.tsx | 50 +++++- src/components/nav/login.tsx | 146 ++++++++++++++++ src/components/ui/alert.tsx | 59 +++++++ src/components/ui/dialog.tsx | 120 +++++++++++++ src/components/ui/drawer.tsx | 116 +++++++++++++ src/components/ui/dropdown-menu.tsx | 198 ++++++++++++++++++++++ src/components/ui/input.tsx | 25 +++ src/components/ui/label.tsx | 24 +++ src/components/ui/skeleton.tsx | 15 ++ src/components/ui/tabs.tsx | 53 ++++++ src/{routes => hooks}/404.tsx | 2 +- src/{routes/hooks.tsx => hooks/index.tsx} | 0 src/{routes => hooks}/loading.tsx | 0 src/hooks/use-media-query.tsx | 19 +++ src/routes/home/index.tsx | 2 +- src/routes/index.tsx | 2 +- src/utils/theme.ts | 26 ++- 19 files changed, 959 insertions(+), 10 deletions(-) create mode 100644 src/components/nav/login.tsx create mode 100644 src/components/ui/alert.tsx create mode 100644 src/components/ui/dialog.tsx create mode 100644 src/components/ui/drawer.tsx create mode 100644 src/components/ui/dropdown-menu.tsx create mode 100644 src/components/ui/input.tsx create mode 100644 src/components/ui/label.tsx create mode 100644 src/components/ui/skeleton.tsx create mode 100644 src/components/ui/tabs.tsx rename src/{routes => hooks}/404.tsx (95%) rename src/{routes/hooks.tsx => hooks/index.tsx} (100%) rename src/{routes => hooks}/loading.tsx (100%) create mode 100644 src/hooks/use-media-query.tsx diff --git a/package.json b/package.json index 460a611..eba0d7d 100644 --- a/package.json +++ b/package.json @@ -13,10 +13,13 @@ "@radix-ui/react-avatar": "^1.1.0", "@radix-ui/react-context-menu": "^2.2.1", "@radix-ui/react-dialog": "^1.1.1", + "@radix-ui/react-dropdown-menu": "^2.1.1", + "@radix-ui/react-label": "^2.1.0", "@radix-ui/react-navigation-menu": "^1.2.0", "@radix-ui/react-progress": "^1.1.0", "@radix-ui/react-separator": "^1.1.0", "@radix-ui/react-slot": "^1.1.0", + "@radix-ui/react-tabs": "^1.1.0", "class-variance-authority": "^0.7.0", "clsx": "^2.1.1", "gun": "^0.2020.1240", @@ -27,7 +30,8 @@ "react-resizable-panels": "^2.1.3", "sonner": "^1.5.0", "tailwind-merge": "^2.5.2", - "tailwindcss-animate": "^1.0.7" + "tailwindcss-animate": "^1.0.7", + "vaul": "^0.9.4" }, "devDependencies": { "@eslint/compat": "^1.1.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 6ebd03e..230d1f2 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -17,6 +17,12 @@ importers: '@radix-ui/react-dialog': specifier: ^1.1.1 version: 1.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-dropdown-menu': + specifier: ^2.1.1 + version: 2.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-label': + specifier: ^2.1.0 + version: 2.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) '@radix-ui/react-navigation-menu': specifier: ^1.2.0 version: 1.2.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) @@ -29,6 +35,9 @@ importers: '@radix-ui/react-slot': specifier: ^1.1.0 version: 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-tabs': + specifier: ^1.1.0 + version: 1.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) class-variance-authority: specifier: ^0.7.0 version: 0.7.0 @@ -62,6 +71,9 @@ importers: tailwindcss-animate: specifier: ^1.0.7 version: 1.0.7(tailwindcss@3.4.12) + vaul: + specifier: ^0.9.4 + version: 0.9.4(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) devDependencies: '@eslint/compat': specifier: ^1.1.1 @@ -521,6 +533,19 @@ packages: '@types/react-dom': optional: true + '@radix-ui/react-dropdown-menu@2.1.1': + resolution: {integrity: sha512-y8E+x9fBq9qvteD2Zwa4397pUVhYsh9iq44b5RD5qu1GMJWBCBuVg1hMyItbc6+zH00TxGRqd9Iot4wzf3OoBQ==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-focus-guards@1.1.0': resolution: {integrity: sha512-w6XZNUPVv6xCpZUqb/yN9DL6auvpGX3C/ee6Hdi16v2UUy25HV2Q5bcflsiDyT/g5RwbPQ/GIT1vLkeRb+ITBw==} peerDependencies: @@ -552,6 +577,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-label@2.1.0': + resolution: {integrity: sha512-peLblDlFw/ngk3UWq0VnYaOLy6agTZZ+MUO/WhVfm14vJGML+xH4FAl2XQGLqdefjNb7ApRg6Yn7U42ZhmYXdw==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-menu@2.1.1': resolution: {integrity: sha512-oa3mXRRVjHi6DZu/ghuzdylyjaMXLymx83irM7hTxutQbD+7IhPKdMdRHD26Rm+kHRrWcrUkkRPv5pd47a2xFQ==} peerDependencies: @@ -678,6 +716,19 @@ packages: '@types/react': optional: true + '@radix-ui/react-tabs@1.1.0': + resolution: {integrity: sha512-bZgOKB/LtZIij75FSuPzyEti/XBhJH52ExgtdVqjCIh+Nx/FW+LhnbXtbCzIi34ccyMsyOja8T0thCzoHFXNKA==} + peerDependencies: + '@types/react': '*' + '@types/react-dom': '*' + react: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + react-dom: ^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc + peerDependenciesMeta: + '@types/react': + optional: true + '@types/react-dom': + optional: true + '@radix-ui/react-use-callback-ref@1.1.0': resolution: {integrity: sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw==} peerDependencies: @@ -2205,6 +2256,12 @@ packages: util-deprecate@1.0.2: resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + vaul@0.9.4: + resolution: {integrity: sha512-pcyIy1nEk6798ReNQpbVH/T/dYnoJ3bwyq7jmSp134s+bSvpWoSWQthm3/jfsQRvHNYIEK4ZKbkHUJ3YfLfw1w==} + peerDependencies: + react: ^16.8 || ^17.0 || ^18.0 + react-dom: ^16.8 || ^17.0 || ^18.0 + webcrypto-core@1.8.0: resolution: {integrity: sha512-kR1UQNH8MD42CYuLzvibfakG5Ew5seG85dMMoAM/1LqvckxaF6pUiidLuraIu4V+YCIFabYecUZAW0TuxAoaqw==} @@ -2757,6 +2814,21 @@ snapshots: '@types/react': types-react@19.0.0-rc.1 '@types/react-dom': types-react-dom@19.0.0-rc.1 + '@radix-ui/react-dropdown-menu@2.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-compose-refs': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-context': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-id': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-menu': 2.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + react: 19.0.0-rc-e4953922-20240919 + react-dom: 19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919) + optionalDependencies: + '@types/react': types-react@19.0.0-rc.1 + '@types/react-dom': types-react-dom@19.0.0-rc.1 + '@radix-ui/react-focus-guards@1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1)': dependencies: react: 19.0.0-rc-e4953922-20240919 @@ -2781,6 +2853,15 @@ snapshots: optionalDependencies: '@types/react': types-react@19.0.0-rc.1 + '@radix-ui/react-label@2.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)': + dependencies: + '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + react: 19.0.0-rc-e4953922-20240919 + react-dom: 19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919) + optionalDependencies: + '@types/react': types-react@19.0.0-rc.1 + '@types/react-dom': types-react-dom@19.0.0-rc.1 + '@radix-ui/react-menu@2.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)': dependencies: '@radix-ui/primitive': 1.1.0 @@ -2919,6 +3000,22 @@ snapshots: optionalDependencies: '@types/react': types-react@19.0.0-rc.1 + '@radix-ui/react-tabs@1.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1)': + dependencies: + '@radix-ui/primitive': 1.1.0 + '@radix-ui/react-context': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-direction': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-id': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + '@radix-ui/react-presence': 1.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-primitive': 2.0.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-roving-focus': 1.1.0(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + '@radix-ui/react-use-controllable-state': 1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1) + react: 19.0.0-rc-e4953922-20240919 + react-dom: 19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919) + optionalDependencies: + '@types/react': types-react@19.0.0-rc.1 + '@types/react-dom': types-react-dom@19.0.0-rc.1 + '@radix-ui/react-use-callback-ref@1.1.0(react@19.0.0-rc-e4953922-20240919)(types-react@19.0.0-rc.1)': dependencies: react: 19.0.0-rc-e4953922-20240919 @@ -4599,6 +4696,15 @@ snapshots: util-deprecate@1.0.2: {} + vaul@0.9.4(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1): + dependencies: + '@radix-ui/react-dialog': 1.1.1(react-dom@19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919))(react@19.0.0-rc-e4953922-20240919)(types-react-dom@19.0.0-rc.1)(types-react@19.0.0-rc.1) + react: 19.0.0-rc-e4953922-20240919 + react-dom: 19.0.0-rc-e4953922-20240919(react@19.0.0-rc-e4953922-20240919) + transitivePeerDependencies: + - '@types/react' + - '@types/react-dom' + webcrypto-core@1.8.0: dependencies: '@peculiar/asn1-schema': 2.3.13 diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 1db05e6..9f5f24a 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -3,17 +3,33 @@ import { NavigationMenuLink, navigationMenuTriggerStyle, } from '@/components/ui/navigation-menu'; -import { navigate } from '@/routes/hooks'; +import { navigate } from '@/hooks'; import './index.css'; import { useMainUser } from '@/hooks/user/useMainUser'; +import { MdDarkMode, MdLightMode, MdOutlineLaptop } from "react-icons/md"; +import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; +import { Button } from '../ui/button'; + +import { useEffect, useState } from 'react'; +import { getTheme, setTheme } from '@/utils/theme'; +import { Login } from './login'; + export default function NavigationBar() { + const [theme, changeTheme] = useState(getTheme()); + const [open, setOpen] = useState(false); + + useEffect(() => setTheme(theme), [theme]); + const user = useMainUser(); // let react handle useMemo const logged = !!user?.userInfo?.isCurrentlyActive; + useEffect(() => logged ? setOpen(false) : undefined, [logged]); + + return ( @@ -26,12 +42,40 @@ export default function NavigationBar() { DChatt + + + + + + + Theme + + + + System + + + + Dark + + + + Light + + + + + navigate(logged ? '/chat' : '/login')} - className={navigationMenuTriggerStyle({ className: 'cursor-pointer' })} + onClick={() => !logged ? setOpen(true) : navigate("/chat")} + className={navigationMenuTriggerStyle({ className: 'ml-1 cursor-pointer' })} > {logged ? 'Chat' : 'Login / SignUp'} + ); } diff --git a/src/components/nav/login.tsx b/src/components/nav/login.tsx new file mode 100644 index 0000000..301218c --- /dev/null +++ b/src/components/nav/login.tsx @@ -0,0 +1,146 @@ +"use client" + +import * as React from "react" + +import { cn } from "@/lib/utils" +import { useMediaQuery } from "@/hooks/use-media-query" +import { Button } from "@/components/ui/button" +import { + Dialog, + DialogContent, + DialogDescription, + DialogHeader, + DialogTitle, +} from "@/components/ui/dialog" +import { + Drawer, + DrawerContent, + DrawerDescription, + DrawerHeader, + DrawerTitle, +} from "@/components/ui/drawer" +import { Input } from "@/components/ui/input" +import { Label } from "@/components/ui/label" +import { Tabs, TabsList, TabsTrigger } from "../ui/tabs" +import { useMainUser, UserContextValues } from "@/hooks/user/useMainUser" +import { Alert, AlertDescription, AlertTitle } from "../ui/alert" +import { AlertCircle } from "lucide-react" + +export function Login({ open, setOpen }: { open: boolean, setOpen: (a: boolean) => void }) { + const isDesktop = useMediaQuery("(min-width: 768px)"); + const [val, setVal] = React.useState("0"); + + const title = val == "0" ? "Login" : "Sign Up"; + const desc = val == "0" ? "Lets log back in to your account" : "Create a new account to get started"; + + if (isDesktop) { + return ( + + + + + + + Login + Signup + + + + {title} + + + {desc} + + + + + + ) + } + + return ( + + + + + + + Login + Signup + + + + {title} + + + {desc} + + + + + + ) +} + +function ProfileForm({ className, val }: { className: string, val: string }) { + const user = useMainUser() as UserContextValues; + + const [err, setErr] = React.useState(""); + + React.useEffect(() => setErr(""), [val]); + + const [isPending, start] = React.useTransition(); + + const handleLogin = React.useMemo(() => (ev: React.FormEvent) => { + start(async () => { + ev.preventDefault(); + + const [username, password] = Array.from(ev.currentTarget.querySelectorAll("input")).map(el => (el as HTMLInputElement).value); + // Login + if (val == "0") { + console.log("Logging in with", username, password); + try { + await user.account.login(username, password); + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + } catch (e: any) { + console.log(e); + setErr(e); + } + } + // Signup + else { + try { + await user.account.create(username, password); + + // eslint-disable-next-line + } catch (e: any) { + console.log(e); + setErr(e); + } + console.log("Signing up"); + } + }); + }, [val, user.account]); + + return ( +
+ {err != "" &&
+ + + Error + {err} + +
} +
+ + +
+
+ + +
+ +
+ ) +} diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx new file mode 100644 index 0000000..41fa7e0 --- /dev/null +++ b/src/components/ui/alert.tsx @@ -0,0 +1,59 @@ +import * as React from "react" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const alertVariants = cva( + "relative w-full rounded-lg border p-4 [&>svg~*]:pl-7 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground", + { + variants: { + variant: { + default: "bg-background text-foreground", + destructive: + "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +const Alert = React.forwardRef< + HTMLDivElement, + React.HTMLAttributes & VariantProps +>(({ className, variant, ...props }, ref) => ( +
+)) +Alert.displayName = "Alert" + +const AlertTitle = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertTitle.displayName = "AlertTitle" + +const AlertDescription = React.forwardRef< + HTMLParagraphElement, + React.HTMLAttributes +>(({ className, ...props }, ref) => ( +
+)) +AlertDescription.displayName = "AlertDescription" + +export { Alert, AlertTitle, AlertDescription } diff --git a/src/components/ui/dialog.tsx b/src/components/ui/dialog.tsx new file mode 100644 index 0000000..c23630e --- /dev/null +++ b/src/components/ui/dialog.tsx @@ -0,0 +1,120 @@ +import * as React from "react" +import * as DialogPrimitive from "@radix-ui/react-dialog" +import { X } from "lucide-react" + +import { cn } from "@/lib/utils" + +const Dialog = DialogPrimitive.Root + +const DialogTrigger = DialogPrimitive.Trigger + +const DialogPortal = DialogPrimitive.Portal + +const DialogClose = DialogPrimitive.Close + +const DialogOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogOverlay.displayName = DialogPrimitive.Overlay.displayName + +const DialogContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + {children} + + + Close + + + +)) +DialogContent.displayName = DialogPrimitive.Content.displayName + +const DialogHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogHeader.displayName = "DialogHeader" + +const DialogFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DialogFooter.displayName = "DialogFooter" + +const DialogTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogTitle.displayName = DialogPrimitive.Title.displayName + +const DialogDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DialogDescription.displayName = DialogPrimitive.Description.displayName + +export { + Dialog, + DialogPortal, + DialogOverlay, + DialogClose, + DialogTrigger, + DialogContent, + DialogHeader, + DialogFooter, + DialogTitle, + DialogDescription, +} diff --git a/src/components/ui/drawer.tsx b/src/components/ui/drawer.tsx new file mode 100644 index 0000000..c17b0cc --- /dev/null +++ b/src/components/ui/drawer.tsx @@ -0,0 +1,116 @@ +import * as React from "react" +import { Drawer as DrawerPrimitive } from "vaul" + +import { cn } from "@/lib/utils" + +const Drawer = ({ + shouldScaleBackground = true, + ...props +}: React.ComponentProps) => ( + +) +Drawer.displayName = "Drawer" + +const DrawerTrigger = DrawerPrimitive.Trigger + +const DrawerPortal = DrawerPrimitive.Portal + +const DrawerClose = DrawerPrimitive.Close + +const DrawerOverlay = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName + +const DrawerContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + +
+ {children} + + +)) +DrawerContent.displayName = "DrawerContent" + +const DrawerHeader = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerHeader.displayName = "DrawerHeader" + +const DrawerFooter = ({ + className, + ...props +}: React.HTMLAttributes) => ( +
+) +DrawerFooter.displayName = "DrawerFooter" + +const DrawerTitle = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerTitle.displayName = DrawerPrimitive.Title.displayName + +const DrawerDescription = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DrawerDescription.displayName = DrawerPrimitive.Description.displayName + +export { + Drawer, + DrawerPortal, + DrawerOverlay, + DrawerTrigger, + DrawerClose, + DrawerContent, + DrawerHeader, + DrawerFooter, + DrawerTitle, + DrawerDescription, +} diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx new file mode 100644 index 0000000..769ff7a --- /dev/null +++ b/src/components/ui/dropdown-menu.tsx @@ -0,0 +1,198 @@ +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" +import { Check, ChevronRight, Circle } from "lucide-react" + +import { cn } from "@/lib/utils" + +const DropdownMenu = DropdownMenuPrimitive.Root + +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger + +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + +const DropdownMenuSubTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, children, ...props }, ref) => ( + + {children} + + +)) +DropdownMenuSubTrigger.displayName = + DropdownMenuPrimitive.SubTrigger.displayName + +const DropdownMenuSubContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSubContent.displayName = + DropdownMenuPrimitive.SubContent.displayName + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 4, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + +const DropdownMenuCheckboxItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, checked, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuCheckboxItem.displayName = + DropdownMenuPrimitive.CheckboxItem.displayName + +const DropdownMenuRadioItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, children, ...props }, ref) => ( + + + + + + + {children} + +)) +DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName + +const DropdownMenuLabel = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, inset, ...props }, ref) => ( + +)) +DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName + +const DropdownMenuShortcut = ({ + className, + ...props +}: React.HTMLAttributes) => { + return ( + + ) +} +DropdownMenuShortcut.displayName = "DropdownMenuShortcut" + +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuCheckboxItem, + DropdownMenuRadioItem, + DropdownMenuLabel, + DropdownMenuSeparator, + DropdownMenuShortcut, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuSubContent, + DropdownMenuSubTrigger, + DropdownMenuRadioGroup, +} diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx new file mode 100644 index 0000000..a921025 --- /dev/null +++ b/src/components/ui/input.tsx @@ -0,0 +1,25 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +export interface InputProps + extends React.InputHTMLAttributes {} + +const Input = React.forwardRef( + ({ className, type, ...props }, ref) => { + return ( + + ) + } +) +Input.displayName = "Input" + +export { Input } diff --git a/src/components/ui/label.tsx b/src/components/ui/label.tsx new file mode 100644 index 0000000..683faa7 --- /dev/null +++ b/src/components/ui/label.tsx @@ -0,0 +1,24 @@ +import * as React from "react" +import * as LabelPrimitive from "@radix-ui/react-label" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const labelVariants = cva( + "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70" +) + +const Label = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & + VariantProps +>(({ className, ...props }, ref) => ( + +)) +Label.displayName = LabelPrimitive.Root.displayName + +export { Label } diff --git a/src/components/ui/skeleton.tsx b/src/components/ui/skeleton.tsx new file mode 100644 index 0000000..01b8b6d --- /dev/null +++ b/src/components/ui/skeleton.tsx @@ -0,0 +1,15 @@ +import { cn } from "@/lib/utils" + +function Skeleton({ + className, + ...props +}: React.HTMLAttributes) { + return ( +
+ ) +} + +export { Skeleton } diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx new file mode 100644 index 0000000..f57fffd --- /dev/null +++ b/src/components/ui/tabs.tsx @@ -0,0 +1,53 @@ +import * as React from "react" +import * as TabsPrimitive from "@radix-ui/react-tabs" + +import { cn } from "@/lib/utils" + +const Tabs = TabsPrimitive.Root + +const TabsList = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsList.displayName = TabsPrimitive.List.displayName + +const TabsTrigger = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsTrigger.displayName = TabsPrimitive.Trigger.displayName + +const TabsContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +TabsContent.displayName = TabsPrimitive.Content.displayName + +export { Tabs, TabsList, TabsTrigger, TabsContent } diff --git a/src/routes/404.tsx b/src/hooks/404.tsx similarity index 95% rename from src/routes/404.tsx rename to src/hooks/404.tsx index c82c3cf..6eecbe3 100644 --- a/src/routes/404.tsx +++ b/src/hooks/404.tsx @@ -3,7 +3,7 @@ import { Button } from '@/components/ui/button'; import { Separator } from '@/components/ui/separator'; import { FcBiohazard } from 'react-icons/fc'; -import { navigate } from './hooks'; +import { navigate } from '@/hooks'; export default function App() { return ( diff --git a/src/routes/hooks.tsx b/src/hooks/index.tsx similarity index 100% rename from src/routes/hooks.tsx rename to src/hooks/index.tsx diff --git a/src/routes/loading.tsx b/src/hooks/loading.tsx similarity index 100% rename from src/routes/loading.tsx rename to src/hooks/loading.tsx diff --git a/src/hooks/use-media-query.tsx b/src/hooks/use-media-query.tsx new file mode 100644 index 0000000..1eecad2 --- /dev/null +++ b/src/hooks/use-media-query.tsx @@ -0,0 +1,19 @@ +import * as React from "react" + +export function useMediaQuery(query: string) { + const [value, setValue] = React.useState(false) + + React.useEffect(() => { + function onChange(event: MediaQueryListEvent) { + setValue(event.matches) + } + + const result = matchMedia(query) + result.addEventListener("change", onChange) + setValue(result.matches) + + return () => result.removeEventListener("change", onChange) + }, [query]) + + return value +} \ No newline at end of file diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 816e75b..54ab43a 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -1,5 +1,5 @@ import NavigationBar from '@/components/nav'; -import { navigate } from '../hooks'; +import { navigate } from '@/hooks'; import { Separator } from '@/components/ui/separator'; export default function App() { diff --git a/src/routes/index.tsx b/src/routes/index.tsx index d66bfa4..b894c10 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -1,5 +1,5 @@ import { UserProvider } from '@/hooks/user/useMainUser'; -import { usePage } from './hooks'; +import { usePage } from '@/hooks'; import './index.css'; diff --git a/src/utils/theme.ts b/src/utils/theme.ts index 97eef96..58b57d8 100644 --- a/src/utils/theme.ts +++ b/src/utils/theme.ts @@ -8,18 +8,38 @@ setInterval(() => { if (!localStorage.dark) { loadThemeInner(defaultDark); } -}, 1 * 1000); +}, 10 * 1000); export function loadTheme() { try { const dark = JSON.parse( - localStorage.dark || defaultDark ? 'true' : 'false', + localStorage.dark || (defaultDark ? 'true' : 'false'), ) as boolean; + loadThemeInner(dark); - } catch { + } catch (e) { + console.log(e); loadThemeInner(defaultDark); } } +export const getTheme = () => { + try { + return localStorage.dark ? localStorage.dark : "system"; + } catch { + return "system"; + } +} + +export const setTheme = (theme: string) => { + if (theme == "system") { + localStorage.removeItem("dark"); + } else { + localStorage.dark = theme; + } + + loadTheme(); +} + const loadThemeInner = (dark: boolean) => document.body.classList.toggle('dark', dark); From a72f864a46dba055d8a36d649f0dbb4452002f12 Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Mon, 23 Sep 2024 22:31:02 +0530 Subject: [PATCH 2/6] fix(bug): Multiple instances of GUN being creased Move db and user out of UserProvider Fixes: Warning: Reusing the same session db --- src/components/nav/index.tsx | 5 ++++- src/hooks/user/useMainUser.tsx | 19 +++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 9f5f24a..8c1016f 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -10,6 +10,8 @@ import { useMainUser } from '@/hooks/user/useMainUser'; import { MdDarkMode, MdLightMode, MdOutlineLaptop } from "react-icons/md"; import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; +import { HiOutlineRocketLaunch } from "react-icons/hi2"; + import { Button } from '../ui/button'; import { useEffect, useState } from 'react'; @@ -73,7 +75,8 @@ export default function NavigationBar() { onClick={() => !logged ? setOpen(true) : navigate("/chat")} className={navigationMenuTriggerStyle({ className: 'ml-1 cursor-pointer' })} > - {logged ? 'Chat' : 'Login / SignUp'} + {logged ? <> : } + {logged ? 'Chat' : Get Started} diff --git a/src/hooks/user/useMainUser.tsx b/src/hooks/user/useMainUser.tsx index 5247496..64b6ff6 100644 --- a/src/hooks/user/useMainUser.tsx +++ b/src/hooks/user/useMainUser.tsx @@ -46,17 +46,17 @@ export function useMainUser() { return useContext(UserContext); } -export function UserProvider({ children }: { children: React.ReactNode }) { - const db = GUN({ - peers: [ - 'https://gun-manhattan.herokuapp.com/gun', - `https://gundb-relay-mlccl.ondigitalocean.app/gun`, - ], // TODO: Add our own servers instead of gun relays - localStorage: false, // Only use indexeddb - }); +const db = GUN({ + peers: [ + 'https://gun-manhattan.herokuapp.com/gun', + `https://gundb-relay-mlccl.ondigitalocean.app/gun`, + ], // TODO: Add our own servers instead of gun relays + localStorage: false, // Only use indexeddb +}); - const user = db.user().recall({ sessionStorage: true }) as GunUserInstance; +const user = db.user().recall({ sessionStorage: true }) as GunUserInstance; +export function UserProvider({ children }: { children: React.ReactNode }) { const [userInfo, setUserInfo] = useState(); useEffect(() => { @@ -73,7 +73,6 @@ export function UserProvider({ children }: { children: React.ReactNode }) { // @ts-expect-error Sea is already active setUserInfo(new ClientUser(ack.sea as ISEAPair, db, user)); }); - // eslint-disable-next-line react-hooks/exhaustive-deps }, []); const account = new AccountManager(setUserInfo, user, db); From 5d4b40fa9da04c84bb09afd646d047725c610690 Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Mon, 23 Sep 2024 23:05:16 +0530 Subject: [PATCH 3/6] feat(nav): New User Design --- src/components/nav/index.tsx | 26 ++++++++++++++++++----- src/hooks/user/helpers/User/ClientUser.ts | 16 ++++++++++++++ src/lib/utils/Gun/Accounts/Account.ts | 6 ++++-- 3 files changed, 41 insertions(+), 7 deletions(-) diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 8c1016f..cae4a27 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -6,7 +6,7 @@ import { import { navigate } from '@/hooks'; import './index.css'; -import { useMainUser } from '@/hooks/user/useMainUser'; +import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser'; import { MdDarkMode, MdLightMode, MdOutlineLaptop } from "react-icons/md"; import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; @@ -17,6 +17,7 @@ import { Button } from '../ui/button'; import { useEffect, useState } from 'react'; import { getTheme, setTheme } from '@/utils/theme'; import { Login } from './login'; +import { Avatar, AvatarFallback, AvatarImage } from '../ui/avatar'; export default function NavigationBar() { const [theme, changeTheme] = useState(getTheme()); @@ -47,7 +48,7 @@ export default function NavigationBar() { @@ -72,13 +73,28 @@ export default function NavigationBar() { !logged ? setOpen(true) : navigate("/chat")} - className={navigationMenuTriggerStyle({ className: 'ml-1 cursor-pointer' })} + onClick={() => !logged ? setOpen(true) : undefined} + className={navigationMenuTriggerStyle({ className: `ml-1 cursor-pointer ${logged ? "hover:bg-transparent cursor-auto" : ""}` })} > {logged ? <> : } - {logged ? 'Chat' : Get Started} + {logged ? : Get Started} ); } + +function ProfileDropdown({ user }: { user: UserContextValues | null }) { + return ( + + + + {user?.userInfo?.alias} + + + + + Hello {user?.userInfo?.display_name || user?.userInfo?.alias} + + ); +} \ No newline at end of file diff --git a/src/hooks/user/helpers/User/ClientUser.ts b/src/hooks/user/helpers/User/ClientUser.ts index e539f68..ce7a038 100644 --- a/src/hooks/user/helpers/User/ClientUser.ts +++ b/src/hooks/user/helpers/User/ClientUser.ts @@ -6,12 +6,28 @@ import { createAvatar } from '@/lib/utils/Avatar/createAvatar'; export class ClientUser extends BaseUser { _sea: ISEAPair; + public alias: string = ""; + public avatar: string = ""; + public bio: string = ""; + public display_name: string = ""; constructor(sea: ISEAPair, db: IGunInstance, user: GunUserInstance) { super(db, user); this._sea = sea; } + async loadAll() { + const arr = ["alias", "avatar", "bio", "display_name"]; + + // For loop + for (let i = 0; i < arr.length; i++) { + const key = arr[i]; + + // eslint-disable-next-line @typescript-eslint/no-explicit-any + (this as any)[key as any] = await this.createPromiseGunGetUser(key as any); + } + } + encrypt(data: string, epub: string) { return EncryptionTools.encryptData( data, diff --git a/src/lib/utils/Gun/Accounts/Account.ts b/src/lib/utils/Gun/Accounts/Account.ts index 4712b7b..bbb3c4e 100644 --- a/src/lib/utils/Gun/Accounts/Account.ts +++ b/src/lib/utils/Gun/Accounts/Account.ts @@ -22,7 +22,7 @@ export class AccountManager { this._user = user; this._db = db; - db.on('auth', (ack: GunUser & { sea?: ISEAPair }) => { + db.on('auth', async (ack: GunUser & { sea?: ISEAPair }) => { if (!ack.sea) { console.warn( 'SEA (Security, encryption and authorization) systems not found on the user. Proceeding to log out', @@ -30,7 +30,9 @@ export class AccountManager { return user.leave(); } - setUserInfo(new ClientUser(ack.sea, db, this._user)); + const client = new ClientUser(ack.sea, db, this._user); + await client.loadAll(); + setUserInfo(client); }); } From 940918ec3426d589db170b79d6f8762704be588d Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Tue, 24 Sep 2024 15:08:50 +0530 Subject: [PATCH 4/6] feat(nav): Implement logout --- src/components/nav/index.tsx | 20 ++++++++++++++++++-- 1 file changed, 18 insertions(+), 2 deletions(-) diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index cae4a27..8410141 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -6,10 +6,12 @@ import { import { navigate } from '@/hooks'; import './index.css'; + +import { LogOut, Settings } from "lucide-react"; import { useMainUser, UserContextValues } from '@/hooks/user/useMainUser'; import { MdDarkMode, MdLightMode, MdOutlineLaptop } from "react-icons/md"; -import { DropdownMenu, DropdownMenuContent, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuGroup, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuTrigger } from '@/components/ui/dropdown-menu'; import { HiOutlineRocketLaunch } from "react-icons/hi2"; import { Button } from '../ui/button'; @@ -86,7 +88,7 @@ export default function NavigationBar() { function ProfileDropdown({ user }: { user: UserContextValues | null }) { return ( - + {user?.userInfo?.alias} @@ -95,6 +97,20 @@ function ProfileDropdown({ user }: { user: UserContextValues | null }) { Hello {user?.userInfo?.display_name || user?.userInfo?.alias} + + + + + + + Edit Profile + + + user?.account.logout()}> + + Logout + + ); } \ No newline at end of file From 3c40b199b018bf0574505dd21a4d28fa373049b8 Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Tue, 24 Sep 2024 15:13:12 +0530 Subject: [PATCH 5/6] fix(user): AvatarFallback should only use first 2 letters of Alias --- src/components/nav/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/nav/index.tsx b/src/components/nav/index.tsx index 8410141..926c5fa 100644 --- a/src/components/nav/index.tsx +++ b/src/components/nav/index.tsx @@ -91,7 +91,7 @@ function ProfileDropdown({ user }: { user: UserContextValues | null }) { - {user?.userInfo?.alias} + {user?.userInfo?.alias.substring(0, 1).toUpperCase()} From 9be1ba8743aff760e8682526a0a5d485c40a7455 Mon Sep 17 00:00:00 2001 From: AHQ Miness Date: Tue, 24 Sep 2024 15:24:46 +0530 Subject: [PATCH 6/6] feat(landing): Make it switch to Chat once logged in --- src/components/nav/index.css | 2 +- src/hooks/index.tsx | 2 +- src/routes/chat/index.tsx | 7 +++++++ src/routes/home/index.tsx | 16 +++++----------- src/routes/landing/index.tsx | 21 +++++++++++++++++++++ 5 files changed, 35 insertions(+), 13 deletions(-) create mode 100644 src/routes/chat/index.tsx create mode 100644 src/routes/landing/index.tsx diff --git a/src/components/nav/index.css b/src/components/nav/index.css index c7996f6..3968766 100644 --- a/src/components/nav/index.css +++ b/src/components/nav/index.css @@ -9,4 +9,4 @@ nav img { nav a * { @apply cursor-pointer; -} +} \ No newline at end of file diff --git a/src/hooks/index.tsx b/src/hooks/index.tsx index b39aa47..dbd3ae4 100644 --- a/src/hooks/index.tsx +++ b/src/hooks/index.tsx @@ -19,7 +19,7 @@ const promisify = e().then(({ default: R }) => ); const imports: { [key: string]: () => Promise } = { - '/': promisify(() => import('@/routes/home/index')), + '/': promisify(() => import('@/routes/landing/index')), }; const delay = (ms: number) => new Promise((r) => setTimeout(() => r(null), ms)); diff --git a/src/routes/chat/index.tsx b/src/routes/chat/index.tsx new file mode 100644 index 0000000..dc74f11 --- /dev/null +++ b/src/routes/chat/index.tsx @@ -0,0 +1,7 @@ +export default function Chat() { + return ( +
+ Chat +
+ ) +} \ No newline at end of file diff --git a/src/routes/home/index.tsx b/src/routes/home/index.tsx index 54ab43a..c3829e5 100644 --- a/src/routes/home/index.tsx +++ b/src/routes/home/index.tsx @@ -1,13 +1,7 @@ -import NavigationBar from '@/components/nav'; -import { navigate } from '@/hooks'; -import { Separator } from '@/components/ui/separator'; - -export default function App() { +export default function Home() { return ( -
- - -
navigate('/this?a=hi')}>Home
+
+ Home
- ); -} + ) +} \ No newline at end of file diff --git a/src/routes/landing/index.tsx b/src/routes/landing/index.tsx new file mode 100644 index 0000000..b5d2a3b --- /dev/null +++ b/src/routes/landing/index.tsx @@ -0,0 +1,21 @@ +import { useMainUser } from '@/hooks/user/useMainUser'; +import Chat from '../chat'; +import Home from '../home'; + +import NavigationBar from '@/components/nav'; + +export default function App() { + const user = useMainUser(); + + const loggedIn = user?.userInfo?.isCurrentlyActive; + + return ( +
+ + +
+ {loggedIn ? : } +
+
+ ); +}