Compare commits
No commits in common. "7d25a7a63e7b196ff903c7b9202d975aef1a98e1" and "10e3f62faa6dbf8fc80043406b145cc5d93149e7" have entirely different histories.
7d25a7a63e
...
10e3f62faa
|
|
@ -1,83 +0,0 @@
|
||||||
/**
|
|
||||||
* 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,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
};
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
node_modules
|
|
||||||
|
|
||||||
/.cache
|
|
||||||
/build
|
|
||||||
/public/build
|
|
||||||
.env
|
|
||||||
47
README.md
47
README.md
|
|
@ -1,47 +1,2 @@
|
||||||
# templates/spa
|
# portal-dashboard
|
||||||
|
|
||||||
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
|
|
||||||
```
|
|
||||||
|
|
|
||||||
Binary file not shown.
|
|
@ -1,117 +0,0 @@
|
||||||
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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,57 +0,0 @@
|
||||||
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 }
|
|
||||||
|
|
@ -1,30 +0,0 @@
|
||||||
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 }
|
|
||||||
|
|
@ -1,42 +0,0 @@
|
||||||
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 }
|
|
||||||
|
|
@ -1,24 +0,0 @@
|
||||||
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 }
|
|
||||||
|
|
@ -1,12 +0,0 @@
|
||||||
import { RemixBrowser } from "@remix-run/react";
|
|
||||||
import { startTransition, StrictMode } from "react";
|
|
||||||
import { hydrateRoot } from "react-dom/client";
|
|
||||||
|
|
||||||
startTransition(() => {
|
|
||||||
hydrateRoot(
|
|
||||||
document,
|
|
||||||
<StrictMode>
|
|
||||||
<RemixBrowser />
|
|
||||||
</StrictMode>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
@ -1,19 +0,0 @@
|
||||||
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,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
Binary file not shown.
Binary file not shown.
|
Before Width: | Height: | Size: 950 B |
Binary file not shown.
|
Before Width: | Height: | Size: 254 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.2 KiB |
44
app/root.tsx
44
app/root.tsx
|
|
@ -1,44 +0,0 @@
|
||||||
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>;
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
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"
|
|
||||||
|
|
||||||
export const meta: MetaFunction = () => {
|
|
||||||
return [
|
|
||||||
{ title: "New Remix SPA" },
|
|
||||||
{ name: "description", content: "Welcome to Remix (SPA Mode)!" }
|
|
||||||
]
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function Index() {
|
|
||||||
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: "email" }}
|
|
||||||
labelProps={{ children: "Email" }}
|
|
||||||
/>
|
|
||||||
<Field
|
|
||||||
inputProps={{ name: "password", type: "password" }}
|
|
||||||
labelProps={{ children: "Password" }}
|
|
||||||
/>
|
|
||||||
<FieldCheckbox
|
|
||||||
inputProps={{ name: "rememberMe" }}
|
|
||||||
labelProps={{ children: "Remember Me" }}
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,80 +0,0 @@
|
||||||
@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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
import { type ClassValue, clsx } from "clsx"
|
|
||||||
import { twMerge } from "tailwind-merge"
|
|
||||||
|
|
||||||
export function cn(...inputs: ClassValue[]) {
|
|
||||||
return twMerge(clsx(inputs))
|
|
||||||
}
|
|
||||||
|
|
@ -1,17 +0,0 @@
|
||||||
{
|
|
||||||
"$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"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,2 +0,0 @@
|
||||||
/// <reference types="@remix-run/node" />
|
|
||||||
/// <reference types="vite/client" />
|
|
||||||
File diff suppressed because it is too large
Load Diff
52
package.json
52
package.json
|
|
@ -1,52 +0,0 @@
|
||||||
{
|
|
||||||
"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"
|
|
||||||
}
|
|
||||||
|
|
@ -1,6 +0,0 @@
|
||||||
export default {
|
|
||||||
plugins: {
|
|
||||||
tailwindcss: {},
|
|
||||||
autoprefixer: {},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
|
|
@ -1,88 +0,0 @@
|
||||||
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
|
|
||||||
|
|
@ -1,26 +0,0 @@
|
||||||
{
|
|
||||||
"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
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,25 +0,0 @@
|
||||||
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"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
Loading…
Reference in New Issue