Compare commits
No commits in common. "51f212c7b45259ad26a8bece91cbcbcb10602329" and "eb82f68bd89b15da587cf4d52a30fe13e16b96db" have entirely different histories.
51f212c7b4
...
eb82f68bd8
|
|
@ -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.
|
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,87 +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"
|
||||
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>
|
||||
)
|
||||
}
|
||||
|
|
@ -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