Merge branch 'master' into develop

.eslintrc.cjs

@@ -0,0 +1,83 @@
+/**
+ * This is intended to be a basic starting point for linting in your app.
+ * It relies on recommended configs out of the box for simplicity, but you can
+ * and should modify this configuration to best suit your team's needs.
+ */
+
+/** @type {import('eslint').Linter.Config} */
+module.exports = {
+  root: true,
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  env: {
+    browser: true,
+    commonjs: true,
+    es6: true,
+  },
+
+  // Base config
+  extends: ["eslint:recommended"],
+
+  overrides: [
+    // React
+    {
+      files: ["**/*.{js,jsx,ts,tsx}"],
+      plugins: ["react", "jsx-a11y"],
+      extends: [
+        "plugin:react/recommended",
+        "plugin:react/jsx-runtime",
+        "plugin:react-hooks/recommended",
+        "plugin:jsx-a11y/recommended",
+      ],
+      settings: {
+        react: {
+          version: "detect",
+        },
+        formComponents: ["Form"],
+        linkComponents: [
+          { name: "Link", linkAttribute: "to" },
+          { name: "NavLink", linkAttribute: "to" },
+        ],
+        "import/resolver": {
+          typescript: {},
+        },
+      },
+    },
+
+    // Typescript
+    {
+      files: ["**/*.{ts,tsx}"],
+      plugins: ["@typescript-eslint", "import"],
+      parser: "@typescript-eslint/parser",
+      settings: {
+        "import/internal-regex": "^~/",
+        "import/resolver": {
+          node: {
+            extensions: [".ts", ".tsx"],
+          },
+          typescript: {
+            alwaysTryTypes: true,
+          },
+        },
+      },
+      extends: [
+        "plugin:@typescript-eslint/recommended",
+        "plugin:import/recommended",
+        "plugin:import/typescript",
+      ],
+    },
+
+    // Node
+    {
+      files: [".eslintrc.cjs"],
+      env: {
+        node: true,
+      },
+    },
+  ],
+};

.gitignore

@@ -0,0 +1,6 @@
+node_modules
+
+/.cache
+/build
+/public/build
+.env

README.md

@@ -1,2 +1,47 @@
-# portal-dashboard
+# templates/spa
 
+This template leverages [Remix SPA Mode](https://remix.run/docs/en/main/future/spa-mode) and the [Remix Vite Plugin](https://remix.run/docs/en/main/future/vite) to build your app as a Single-Page Application using [Client Data](https://remix.run/docs/en/main/guides/client-data) for all of your data loads and mutations.
+
+## Setup
+
+```shellscript
+npx create-remix@latest --template remix-run/remix/templates/spa
+```
+
+## Development
+
+You can develop your SPA app just like you would a normal Remix app, via:
+
+```shellscript
+npm run dev
+```
+
+## Production
+
+When you are ready to build a production version of your app, `npm run build` will generate your assets and an `index.html` for the SPA.
+
+```shellscript
+npm run build
+```
+
+### Preview
+
+You can preview the build locally with [vite preview](https://vitejs.dev/guide/cli#vite-preview) to serve all routes via the single `index.html` file:
+
+```shellscript
+npm run preview
+```
+
+> [!IMPORTANT]
+>
+> `vite preview` is not designed for use as a production server
+
+### Deployment
+
+You can then serve your app from any HTTP server of your choosing. The server should be configured to serve multiple paths from a single root `/index.html` file (commonly called "SPA fallback"). Other steps may be required if the server doesn't directly support this functionality.
+
+For a simple example, you could use [sirv-cli](https://www.npmjs.com/package/sirv-cli):
+
+```shellscript
+npx sirv-cli build/client/ --single
+```

app/components/forms.tsx

@@ -0,0 +1,117 @@
+import { Label } from "@radix-ui/react-label"
+import { Input } from "./ui/input"
+import { FieldName, useInputControl } from "@conform-to/react"
+import { useId } from "react"
+import { cn } from "~/utils"
+import { Checkbox } from "~/components/ui/checkbox"
+
+export const Field = ({
+  inputProps,
+  labelProps,
+  errors,
+  className
+}: {
+  inputProps: {
+    name: FieldName<string>
+  } & React.HTMLProps<HTMLInputElement>
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+  errors?: ListOfErrors
+  className?: string
+}) => {
+  const fallbackId = useId()
+  const id = inputProps.id ?? fallbackId
+  const errorId = errors?.length ? `${id}-error` : undefined
+  return (
+    <div className={className}>
+      <Label {...labelProps} htmlFor={id} />
+      <Input
+        {...inputProps}
+        id={id}
+        aria-invalid={errorId ? true : undefined}
+        aria-describedby={errorId}
+      />
+      <div className="min-h-[32px] px-4 pb-3 pt-1">
+        {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+      </div>
+    </div>
+  )
+}
+
+export const FieldCheckbox = ({
+  inputProps,
+  labelProps,
+  errors,
+  className
+}: {
+  inputProps: {
+    name: string
+    form: string
+    value?: string
+  } & React.ComponentPropsWithoutRef<typeof Checkbox>
+  labelProps: React.LabelHTMLAttributes<HTMLLabelElement>
+  errors?: ListOfErrors
+  className?: string
+}) => {
+  const { key, defaultChecked, ...checkboxProps } = inputProps
+  const checkedValue = inputProps.value ?? "on"
+  const input = useInputControl({
+    key,
+    name: inputProps.name,
+    formId: inputProps.form,
+    initialValue: defaultChecked ? checkedValue : undefined
+  })
+  const fallbackId = useId()
+  const id = inputProps.id ?? fallbackId
+  const errorId = errors?.length ? `${id}-error` : undefined
+  return (
+    <div
+      className={cn("space-x-2 flex items-center text-primary-2", className)}
+    >
+      <Checkbox
+        {...checkboxProps}
+        id={id}
+        aria-invalid={errorId ? true : undefined}
+        aria-describedby={errorId}
+        checked={input.value === checkedValue}
+        onCheckedChange={(state) => {
+          input.change(state.valueOf() ? checkedValue : "")
+          inputProps.onCheckedChange?.(state)
+        }}
+        onFocus={(event) => {
+          input.focus()
+          inputProps.onFocus?.(event)
+        }}
+        onBlur={(event) => {
+          input.blur()
+          inputProps.onBlur?.(event)
+        }}
+        type="button"
+      />
+      <Label {...labelProps} htmlFor={id} />
+      <div className="min-h-[32px] px-4 pb-3 pt-1">
+        {errorId ? <ErrorList id={errorId} errors={errors} /> : null}
+      </div>
+    </div>
+  )
+}
+
+export type ListOfErrors = Array<string | null | undefined> | null | undefined
+export function ErrorList({
+  id,
+  errors
+}: {
+  errors?: ListOfErrors
+  id?: string
+}) {
+  const errorsToRender = errors?.filter(Boolean)
+  if (!errorsToRender?.length) return null
+  return (
+    <ul id={id} className="flex flex-col gap-1">
+      {errorsToRender.map((e) => (
+        <li key={e} className="text-[10px] text-foreground-destructive">
+          {e}
+        </li>
+      ))}
+    </ul>
+  )
+}

app/components/ui/button.tsx

@@ -0,0 +1,57 @@
+import * as React from "react"
+import { Slot } from "@radix-ui/react-slot"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "~/utils"
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default:
+          "bg-primary text-primary-foreground hover:bg-primary/50",
+        destructive:
+          "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        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",
+        link: "text-primary-1 underline-offset-4 hover:underline",
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 rounded-md px-3 text-xs",
+        lg: "h-10 rounded-md px-8",
+        icon: "h-9 w-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  }
+)
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "button"
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Button.displayName = "Button"
+
+export { Button, buttonVariants }

app/components/ui/checkbox.tsx

@@ -0,0 +1,30 @@
+import * as React from "react"
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox"
+import { CheckIcon } from "@radix-ui/react-icons"
+
+import { cn } from "~/utils"
+
+const Checkbox = React.forwardRef<
+  React.ElementRef<typeof CheckboxPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & {
+    className?: string
+  }
+>(({ className, ...props }, ref) => (
+  <CheckboxPrimitive.Root
+    ref={ref}
+    className={cn(
+      "peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground",
+      className
+    )}
+    {...props}
+  >
+    <CheckboxPrimitive.Indicator
+      className={cn("flex items-center justify-center text-current")}
+    >
+      <CheckIcon className="h-4 w-4" />
+    </CheckboxPrimitive.Indicator>
+  </CheckboxPrimitive.Root>
+))
+Checkbox.displayName = CheckboxPrimitive.Root.displayName
+
+export { Checkbox }

app/components/ui/input.tsx

@@ -0,0 +1,42 @@
+import * as React from "react"
+
+import { cn } from "~/utils"
+import { EyeOpenIcon, EyeNoneIcon } from "@radix-ui/react-icons"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    const [showPassword, setShowPassword] = React.useState<boolean>(false)
+    const [mask, setMask] = React.useState<boolean>(false)
+    const toggleShowPassword = () => {
+      setShowPassword((show) => !show)
+      setMask((mask) => !mask)
+    }
+    return (
+      <div className="relative">
+        <input
+          type={type && !mask ? type : "text"}
+          className={cn(
+            "flex h-14 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-input-placeholder focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50",
+            className
+          )}
+          ref={ref}
+          {...props}
+        />
+        {type === "password" ? <button
+          type="button"
+          className="absolute right-4 top-5 text-input"
+          onClick={toggleShowPassword}
+          onKeyDown={toggleShowPassword}
+        >
+          {showPassword ? <EyeOpenIcon /> : <EyeNoneIcon />}
+        </button> : null}
+      </div>
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

app/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 "~/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<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

app/entry.client.tsx

@@ -0,0 +1,12 @@
+import { RemixBrowser } from "@remix-run/react";
+import { startTransition, StrictMode } from "react";
+import { hydrateRoot } from "react-dom/client";
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <RemixBrowser />
+    </StrictMode>
+  );
+});

app/entry.server.tsx

@@ -0,0 +1,19 @@
+import type { EntryContext } from "@remix-run/node";
+import { RemixServer } from "@remix-run/react";
+import { renderToString } from "react-dom/server";
+
+export default function handleRequest(
+  request: Request,
+  responseStatusCode: number,
+  responseHeaders: Headers,
+  remixContext: EntryContext
+) {
+  let html = renderToString(
+    <RemixServer context={remixContext} url={request.url} />
+  );
+  html = "<!DOCTYPE html>\n" + html;
+  return new Response(html, {
+    headers: { "Content-Type": "text/html" },
+    status: responseStatusCode,
+  });
+}

app/root.tsx

@@ -0,0 +1,44 @@
+import {
+  Links,
+  Meta,
+  Outlet,
+  Scripts,
+  ScrollRestoration,
+} from "@remix-run/react";
+
+import stylesheet from "./tailwind.css?url";
+import { LinksFunction } from "@remix-run/node";
+
+// Supports weights 200-800
+import '@fontsource-variable/manrope';
+
+export const links: LinksFunction = () => [
+  { rel: "stylesheet", href: stylesheet },
+  // { rel: "stylesheet", href: manropeStylesheet },
+];
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en">
+      <head>
+        <meta charSet="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+        <Meta />
+        <Links />
+      </head>
+      <body>
+        {children}
+        <ScrollRestoration />
+        <Scripts />
+      </body>
+    </html>
+  );
+}
+
+export default function App() {
+  return <Outlet />;
+}
+
+export function HydrateFallback() {
+  return <p>Loading...</p>;
+}

app/routes/_index.tsx

@@ -0,0 +1,87 @@
+import type { MetaFunction } from "@remix-run/node"
+import { Link } from "@remix-run/react"
+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 lumeBgPng from "~/images/lume-bg-image.png?url"
+import { Field, FieldCheckbox } from "~/components/forms"
+import { useForm } from "@conform-to/react"
+
+export const meta: MetaFunction = () => {
+  return [
+    { title: "New Remix SPA" },
+    { name: "description", content: "Welcome to Remix (SPA Mode)!" }
+  ]
+}
+
+export default function Index() {
+  const [form, fields] = useForm({
+    id: "login"
+  })
+  return (
+    <div className="p-10 h-screen relative overflow-clip">
+      <header>
+        <img src={logoPng} alt="Lume logo" className="h-10"></img>
+      </header>
+      <form className="w-full p-2 max-w-md space-y-4 mt-12 bg-background">
+        <h2 className="text-3xl font-bold !mb-12">Welcome back! 🎉</h2>
+        <Field
+          inputProps={{ name: fields.email.name }}
+          labelProps={{ children: "Email" }}
+          errors={fields.email.errors}
+        />
+        <Field
+          inputProps={{ name: fields.password.name, type: "password" }}
+          labelProps={{ children: "Password" }}
+          errors={fields.password.errors}
+        />
+        <FieldCheckbox 
+          inputProps={{ name: fields.rememberMe.name, form: form.id }}
+          labelProps={{ children: "Remember Me" }}
+          errors={fields.rememberMe.errors}
+        />
+        <Button className="w-full h-14">Login</Button>
+        <p className="text-input-placeholder">
+          Forgot your password?{" "}
+          <Link
+            to="/sign-up"
+            className="text-primary-1 text-md hover:underline hover:underline-offset-4"
+          >
+            Reset Password
+          </Link>
+        </p>
+        <Button className="w-full h-14" variant={"outline"}>
+          Create an Account
+        </Button>
+      </form>
+      <img src={lumeBgPng} alt="Lume background" className="absolute top-0 right-0 md:w-2/3 object-cover z-[-1]"></img>
+      <footer className="absolute bottom-5">
+        <ul className="flex flex-row">
+          <li>
+            <Link to="https://discord.lumeweb.com">
+              <Button
+                variant={"link"}
+                className="flex flex-row gap-x-2 text-input-placeholder"
+              >
+                <img className="h-5" src={discordLogoPng} alt="Discord Logo" />
+                Connect with us
+              </Button>
+            </Link>
+          </li>
+          <li>
+            <Link to="https://lumeweb.com">
+              <Button
+                variant={"link"}
+                className="flex flex-row gap-x-2 text-input-placeholder"
+              >
+                <img className="h-5" src={lumeColorLogoPng} alt="Lume Logo" />
+                Connect with us
+              </Button>
+            </Link>
+          </li>
+        </ul>
+      </footer>
+    </div>
+  )
+}

app/tailwind.css

@@ -0,0 +1,80 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+ 
+@layer base {
+  :root {
+    --background: 240, 33%, 3%;
+    --foreground: 0, 0%, 88%;
+
+    --card: 0 0% 0%;
+    --card-foreground: 0 0% 3.9%;
+ 
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+ 
+    --primary: 242 51% 14%;
+    --primary-1: 241 90% 82%;
+    --primary-2: 241 21% 42%;
+    --primary-foreground: 0 0% 88%;
+    --primary-1-foreground: 240 50% 9%;
+ 
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+ 
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+ 
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+ 
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+
+    --border: 240 50% 17%;
+    --input: 240 50% 17%;
+    --input-placeholder: 241 21% 42%;
+    --ring: 0 0% 3.9%;
+ 
+    --radius: 5px;
+  }
+ 
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+ 
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+ 
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+ 
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+ 
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+ 
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+ 
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+ 
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+ 
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+  }
+}
+ 
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground font-sans;
+  }
+}

app/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx"
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs))
+}

components.json

@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "./tailwind.config.ts",
+    "css": "./app/tailwind.css",
+    "baseColor": "neutral",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "~/components",
+    "utils": "~/utils",
+    "ui": "~/components/ui"
+  }
+}

env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="@remix-run/node" />
+/// <reference types="vite/client" />

package.json

@@ -0,0 +1,52 @@
+{
+  "name": "",
+  "private": true,
+  "sideEffects": false,
+  "type": "module",
+  "scripts": {
+    "build": "remix vite:build",
+    "dev": "remix vite:dev",
+    "lint": "eslint --ignore-path .gitignore --cache --cache-location ./node_modules/.cache/eslint .",
+    "preview": "vite preview",
+    "typecheck": "tsc"
+  },
+  "dependencies": {
+    "@conform-to/react": "^1.0.2",
+    "@conform-to/zod": "^1.0.2",
+    "@fontsource-variable/manrope": "^5.0.19",
+    "@radix-ui/react-checkbox": "^1.0.4",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-label": "^2.0.2",
+    "@radix-ui/react-slot": "^1.0.2",
+    "@remix-run/node": "^2.8.0",
+    "@remix-run/react": "^2.8.0",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.2.1",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "devDependencies": {
+    "@remix-run/dev": "^2.8.0",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@typescript-eslint/eslint-plugin": "^6.7.4",
+    "@typescript-eslint/parser": "^6.7.4",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^8.38.0",
+    "eslint-import-resolver-typescript": "^3.6.1",
+    "eslint-plugin-import": "^2.28.1",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.33.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.1.6",
+    "vite": "^5.1.0",
+    "vite-tsconfig-paths": "^4.2.1"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  },
+  "packageManager": "npm"
+}

postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.ts

@@ -0,0 +1,88 @@
+import type { Config } from "tailwindcss"
+
+const config = {
+  darkMode: ["class"],
+  content: ["./app/**/*.{ts,tsx}"],
+  prefix: "",
+  theme: {
+    container: {
+      center: true,
+      padding: "2rem",
+      screens: {
+        "2xl": "1400px"
+      }
+    },
+    extend: {
+      fontFamily: {
+        sans: ["Manrope Variable", "sans-serif"]
+      },
+      colors: {
+        border: "hsl(var(--border))",
+        input: {
+          DEFAULT: "hsl(var(--input))",
+          placeholder: "hsl(var(--input-placeholder))",
+        },
+        ring: "hsl(var(--ring))",
+        background: "hsl(var(--background))",
+        foreground: "hsl(var(--foreground))",
+        primary: {
+          DEFAULT: "hsl(var(--primary))",
+          foreground: "hsl(var(--primary-foreground))"
+        },
+        "primary-1": {
+          DEFAULT: "hsl(var(--primary-1))",
+          foreground: "hsl(var(--primary-1-foreground))"
+        },
+        "primary-2": {
+          DEFAULT: "hsl(var(--primary-2))",
+        },
+        secondary: {
+          DEFAULT: "hsl(var(--secondary))",
+          foreground: "hsl(var(--secondary-foreground))"
+        },
+        destructive: {
+          DEFAULT: "hsl(var(--destructive))",
+          foreground: "hsl(var(--destructive-foreground))"
+        },
+        muted: {
+          DEFAULT: "hsl(var(--muted))",
+          foreground: "hsl(var(--muted-foreground))"
+        },
+        accent: {
+          DEFAULT: "hsl(var(--accent))",
+          foreground: "hsl(var(--accent-foreground))"
+        },
+        popover: {
+          DEFAULT: "hsl(var(--popover))",
+          foreground: "hsl(var(--popover-foreground))"
+        },
+        card: {
+          DEFAULT: "hsl(var(--card))",
+          foreground: "hsl(var(--card-foreground))"
+        }
+      },
+      borderRadius: {
+        lg: "var(--radius)",
+        md: "calc(var(--radius) - 2px)",
+        sm: "calc(var(--radius) - 4px)"
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: "0" },
+          to: { height: "var(--radix-accordion-content-height)" }
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: "0" }
+        }
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out"
+      }
+    }
+  },
+  plugins: [require("tailwindcss-animate")]
+} satisfies Config
+
+export default config

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "include": ["env.d.ts", "**/*.ts", "**/*.tsx"],
+  "compilerOptions": {
+    "lib": ["DOM", "DOM.Iterable", "ES2022"],
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "jsx": "react-jsx",
+    "module": "ESNext",
+    "moduleResolution": "Bundler",
+    "resolveJsonModule": true,
+    "target": "ES2022",
+    "strict": true,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "baseUrl": ".",
+    "paths": {
+      "~/*": ["./app/*"],
+      "~/components/*": ["./app/components/*"],
+      "~/utils/*": ["./app/utils/*"],
+    },
+
+    // Remix takes care of building everything in `remix build`.
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,25 @@
+import { vitePlugin as remix } from "@remix-run/dev";
+import { defineConfig } from "vite";
+import tsconfigPaths from "vite-tsconfig-paths";
+
+export default defineConfig({
+  plugins: [
+    remix({
+      ssr: false,
+      ignoredRouteFiles: ["**/*.css"],
+      
+    }),
+    tsconfigPaths(),
+  ],
+  server: {
+    fs: {
+      // Restrict files that could be served by Vite's dev server.  Accessing
+      // files outside this directory list that aren't imported from an allowed
+      // file will result in a 403.  Both directories and files can be provided.
+      // If you're comfortable with Vite's dev server making any file within the
+      // project root available, you can remove this option.  See more:
+      // https://vitejs.dev/config/server-options.html#server-fs-allow
+      allow: ["app", "node_modules/@fontsource-variable/manrope"],
+    },
+  },
+});