Spaces:
Sleeping
Sleeping
lucas-wa
commited on
Commit
·
9bc6550
1
Parent(s):
6df5942
Adding web
Browse files- web/.eslintrc.cjs +21 -0
- web/.gitignore +24 -0
- web/README.md +8 -0
- web/components.json +17 -0
- web/index.html +19 -0
- web/package-lock.json +0 -0
- web/package.json +35 -0
- web/postcss.config.js +6 -0
- web/src/App.jsx +121 -0
- web/src/components/ui/select.jsx +122 -0
- web/src/index.css +29 -0
- web/src/lib/utils.js +6 -0
- web/src/main.jsx +10 -0
- web/tailwind.config.js +80 -0
- web/tsconfig.json +10 -0
- web/vite.config.js +15 -0
web/.eslintrc.cjs
ADDED
@@ -0,0 +1,21 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
module.exports = {
|
2 |
+
root: true,
|
3 |
+
env: { browser: true, es2020: true },
|
4 |
+
extends: [
|
5 |
+
'eslint:recommended',
|
6 |
+
'plugin:react/recommended',
|
7 |
+
'plugin:react/jsx-runtime',
|
8 |
+
'plugin:react-hooks/recommended',
|
9 |
+
],
|
10 |
+
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
11 |
+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
|
12 |
+
settings: { react: { version: '18.2' } },
|
13 |
+
plugins: ['react-refresh'],
|
14 |
+
rules: {
|
15 |
+
'react/jsx-no-target-blank': 'off',
|
16 |
+
'react-refresh/only-export-components': [
|
17 |
+
'warn',
|
18 |
+
{ allowConstantExport: true },
|
19 |
+
],
|
20 |
+
},
|
21 |
+
}
|
web/.gitignore
ADDED
@@ -0,0 +1,24 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# Logs
|
2 |
+
logs
|
3 |
+
*.log
|
4 |
+
npm-debug.log*
|
5 |
+
yarn-debug.log*
|
6 |
+
yarn-error.log*
|
7 |
+
pnpm-debug.log*
|
8 |
+
lerna-debug.log*
|
9 |
+
|
10 |
+
node_modules
|
11 |
+
dist
|
12 |
+
dist-ssr
|
13 |
+
*.local
|
14 |
+
|
15 |
+
# Editor directories and files
|
16 |
+
.vscode/*
|
17 |
+
!.vscode/extensions.json
|
18 |
+
.idea
|
19 |
+
.DS_Store
|
20 |
+
*.suo
|
21 |
+
*.ntvs*
|
22 |
+
*.njsproj
|
23 |
+
*.sln
|
24 |
+
*.sw?
|
web/README.md
ADDED
@@ -0,0 +1,8 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
# React + Vite
|
2 |
+
|
3 |
+
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
|
4 |
+
|
5 |
+
Currently, two official plugins are available:
|
6 |
+
|
7 |
+
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
|
8 |
+
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
|
web/components.json
ADDED
@@ -0,0 +1,17 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"$schema": "https://ui.shadcn.com/schema.json",
|
3 |
+
"style": "default",
|
4 |
+
"rsc": true,
|
5 |
+
"tsx": false,
|
6 |
+
"tailwind": {
|
7 |
+
"config": "tailwind.config.js",
|
8 |
+
"css": "src/index.css",
|
9 |
+
"baseColor": "slate",
|
10 |
+
"cssVariables": true,
|
11 |
+
"prefix": ""
|
12 |
+
},
|
13 |
+
"aliases": {
|
14 |
+
"components": "@/components",
|
15 |
+
"utils": "@/lib/utils"
|
16 |
+
}
|
17 |
+
}
|
web/index.html
ADDED
@@ -0,0 +1,19 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
<!doctype html>
|
2 |
+
<html lang="en">
|
3 |
+
|
4 |
+
<head>
|
5 |
+
<meta charset="UTF-8" />
|
6 |
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
7 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
8 |
+
<title>Vite + React</title>
|
9 |
+
<link rel="preconnect" href="https://fonts.googleapis.com">
|
10 |
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
11 |
+
<link href="https://fonts.googleapis.com/css2?family=Inter:[email protected]&display=swap" rel="stylesheet">
|
12 |
+
</head>
|
13 |
+
|
14 |
+
<body>
|
15 |
+
<div id="root"></div>
|
16 |
+
<script type="module" src="/src/main.jsx"></script>
|
17 |
+
</body>
|
18 |
+
|
19 |
+
</html>
|
web/package-lock.json
ADDED
The diff for this file is too large to render.
See raw diff
|
|
web/package.json
ADDED
@@ -0,0 +1,35 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"name": "question-generator",
|
3 |
+
"private": true,
|
4 |
+
"version": "0.0.0",
|
5 |
+
"type": "module",
|
6 |
+
"scripts": {
|
7 |
+
"dev": "vite",
|
8 |
+
"build": "vite build",
|
9 |
+
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
|
10 |
+
"preview": "vite preview"
|
11 |
+
},
|
12 |
+
"dependencies": {
|
13 |
+
"@radix-ui/react-select": "^2.0.0",
|
14 |
+
"class-variance-authority": "^0.7.0",
|
15 |
+
"clsx": "^2.1.1",
|
16 |
+
"lucide-react": "^0.377.0",
|
17 |
+
"react": "^18.2.0",
|
18 |
+
"react-dom": "^18.2.0",
|
19 |
+
"tailwind-merge": "^2.3.0",
|
20 |
+
"tailwindcss-animate": "^1.0.7"
|
21 |
+
},
|
22 |
+
"devDependencies": {
|
23 |
+
"@types/react": "^18.2.66",
|
24 |
+
"@types/react-dom": "^18.2.22",
|
25 |
+
"@vitejs/plugin-react": "^4.2.1",
|
26 |
+
"autoprefixer": "^10.4.19",
|
27 |
+
"eslint": "^8.57.0",
|
28 |
+
"eslint-plugin-react": "^7.34.1",
|
29 |
+
"eslint-plugin-react-hooks": "^4.6.0",
|
30 |
+
"eslint-plugin-react-refresh": "^0.4.6",
|
31 |
+
"postcss": "^8.4.38",
|
32 |
+
"tailwindcss": "^3.4.3",
|
33 |
+
"vite": "^5.2.0"
|
34 |
+
}
|
35 |
+
}
|
web/postcss.config.js
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
export default {
|
2 |
+
plugins: {
|
3 |
+
tailwindcss: {},
|
4 |
+
autoprefixer: {},
|
5 |
+
},
|
6 |
+
}
|
web/src/App.jsx
ADDED
@@ -0,0 +1,121 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import {
|
2 |
+
Select,
|
3 |
+
SelectContent,
|
4 |
+
SelectItem,
|
5 |
+
SelectTrigger,
|
6 |
+
SelectValue,
|
7 |
+
} from "@/components/ui/select"
|
8 |
+
import { ChevronLeft, Menu } from "lucide-react"
|
9 |
+
import { useEffect, useRef, useState } from "react";
|
10 |
+
|
11 |
+
function App() {
|
12 |
+
|
13 |
+
const selectRef = useRef(null);
|
14 |
+
const [subject, setSubject] = useState("");
|
15 |
+
|
16 |
+
const [menuState, setMenuState] = useState(true);
|
17 |
+
const [isLoading, setIsLoading] = useState(false);
|
18 |
+
const [questions, setQuestions] = useState("");
|
19 |
+
|
20 |
+
const handleSubmit = async (e) => {
|
21 |
+
e.preventDefault();
|
22 |
+
setIsLoading(true);
|
23 |
+
try {
|
24 |
+
const res = await fetch("https://abac-35-243-250-231.ngrok-free.app/question" + "/" + subject, {
|
25 |
+
method: "POST",
|
26 |
+
headers: {
|
27 |
+
"Content-Type": "application/json"
|
28 |
+
},
|
29 |
+
// body: JSON.stringify({
|
30 |
+
// assunto: subject
|
31 |
+
// })
|
32 |
+
});
|
33 |
+
console.log(res)
|
34 |
+
if (res.ok) {
|
35 |
+
const data = await res.json();
|
36 |
+
console.log(data)
|
37 |
+
setQuestions(data.question.split("###"));
|
38 |
+
}
|
39 |
+
} catch (err) {
|
40 |
+
console.error(err);
|
41 |
+
}
|
42 |
+
setIsLoading(false);
|
43 |
+
}
|
44 |
+
|
45 |
+
|
46 |
+
useEffect(() => {
|
47 |
+
const handleResize = () => {
|
48 |
+
if (window.innerWidth > 768) {
|
49 |
+
setMenuState(true);
|
50 |
+
} else {
|
51 |
+
setMenuState(false);
|
52 |
+
}
|
53 |
+
}
|
54 |
+
// console.log(selectRef.current.value)
|
55 |
+
window.addEventListener("resize", handleResize);
|
56 |
+
return () => window.removeEventListener("resize", handleResize);
|
57 |
+
}
|
58 |
+
, []);
|
59 |
+
|
60 |
+
return (
|
61 |
+
<div className="font-sans text-white min-h-screen bg-slate-900 flex flex-col relative">
|
62 |
+
<header className="p-10 flex items-center gap-2.5">
|
63 |
+
<Menu className="md:hidden" onClick={e => setMenuState(prev => !prev)} />
|
64 |
+
<h1 className="text-3xl font-bold">
|
65 |
+
PerguntAI
|
66 |
+
</h1>
|
67 |
+
</header>
|
68 |
+
<main className="flex-1 flex">
|
69 |
+
{
|
70 |
+
menuState &&
|
71 |
+
<form
|
72 |
+
onSubmit={handleSubmit}
|
73 |
+
className="p-10 flex flex-col gap-2.5 absolute top-0 bg-black/70 h-full z-10 md:static md:h-full md:bg-transparent">
|
74 |
+
<div className="md:sr-only">
|
75 |
+
<ChevronLeft className="w-10 h-10" onClick={e => setMenuState(prev => !prev)} />
|
76 |
+
</div>
|
77 |
+
<h2>Selecione uma matéria:</h2>
|
78 |
+
<Select defaultValue="biologia" >
|
79 |
+
<SelectTrigger className="w-[180px]">
|
80 |
+
<SelectValue placeholder="Matéria" />
|
81 |
+
</SelectTrigger>
|
82 |
+
<SelectContent >
|
83 |
+
<SelectItem value="biologia">Biologia</SelectItem>
|
84 |
+
</SelectContent>
|
85 |
+
</Select>
|
86 |
+
<h2>Selecione um conteúdo:</h2>
|
87 |
+
<Select onValueChange={value => setSubject(value)}>
|
88 |
+
<SelectTrigger className="w-[180px]">
|
89 |
+
<SelectValue placeholder="Conteúdo" />
|
90 |
+
</SelectTrigger>
|
91 |
+
<SelectContent onChange={e => console.log(e)}>
|
92 |
+
<SelectItem value="fisiologia">Fisiologia</SelectItem>
|
93 |
+
<SelectItem value="embriologia">Embriologia</SelectItem>
|
94 |
+
<SelectItem value="citologia">Citologia</SelectItem>
|
95 |
+
</SelectContent>
|
96 |
+
</Select>
|
97 |
+
<button className="h-10 bg-purple-500 rounded px-2.5 py-1 mt-5 hover:brightness-110 transition-all flex items-center justify-center disabled:hover:brightness-75 disabled:brightness-75"
|
98 |
+
disabled={isLoading}>
|
99 |
+
{
|
100 |
+
isLoading ?
|
101 |
+
<div className="animate-spin h-5 w-5 border-2 border-white border-r-purple-500 rounded-full "></div>
|
102 |
+
:
|
103 |
+
"Enviar"
|
104 |
+
}
|
105 |
+
</button>
|
106 |
+
</form>
|
107 |
+
}
|
108 |
+
<section className="p-10 flex-1 md:border-l-2 md:border-l-white flex flex-col gap-2.5">
|
109 |
+
<h2 className="text-2xl font-bold">Questões</h2>
|
110 |
+
<div className="w-full h-full flex flex-col gap-5 ring-2 ring-white rounded bg-slate-950 p-2.5">
|
111 |
+
{questions ?
|
112 |
+
questions.map((question, index) => <p className="" key={index}>{question}</p>)
|
113 |
+
: "Ainda sem questões"}
|
114 |
+
</div>
|
115 |
+
</section>
|
116 |
+
</main>
|
117 |
+
</div>
|
118 |
+
)
|
119 |
+
}
|
120 |
+
|
121 |
+
export default App
|
web/src/components/ui/select.jsx
ADDED
@@ -0,0 +1,122 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
"use client"
|
2 |
+
|
3 |
+
import * as React from "react"
|
4 |
+
import * as SelectPrimitive from "@radix-ui/react-select"
|
5 |
+
import { Check, ChevronDown, ChevronUp } from "lucide-react"
|
6 |
+
|
7 |
+
import { cn } from "@/lib/utils"
|
8 |
+
|
9 |
+
const Select = SelectPrimitive.Root
|
10 |
+
|
11 |
+
const SelectGroup = SelectPrimitive.Group
|
12 |
+
|
13 |
+
const SelectValue = SelectPrimitive.Value
|
14 |
+
|
15 |
+
const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
|
16 |
+
<SelectPrimitive.Trigger
|
17 |
+
ref={ref}
|
18 |
+
className={cn(
|
19 |
+
"flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
|
20 |
+
className
|
21 |
+
)}
|
22 |
+
{...props}>
|
23 |
+
{children}
|
24 |
+
<SelectPrimitive.Icon asChild>
|
25 |
+
<ChevronDown className="h-4 w-4 opacity-50" />
|
26 |
+
</SelectPrimitive.Icon>
|
27 |
+
</SelectPrimitive.Trigger>
|
28 |
+
))
|
29 |
+
SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
|
30 |
+
|
31 |
+
const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
|
32 |
+
<SelectPrimitive.ScrollUpButton
|
33 |
+
ref={ref}
|
34 |
+
className={cn("flex cursor-default items-center justify-center py-1", className)}
|
35 |
+
{...props}>
|
36 |
+
<ChevronUp className="h-4 w-4" />
|
37 |
+
</SelectPrimitive.ScrollUpButton>
|
38 |
+
))
|
39 |
+
SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
|
40 |
+
|
41 |
+
const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
|
42 |
+
<SelectPrimitive.ScrollDownButton
|
43 |
+
ref={ref}
|
44 |
+
className={cn("flex cursor-default items-center justify-center py-1", className)}
|
45 |
+
{...props}>
|
46 |
+
<ChevronDown className="h-4 w-4" />
|
47 |
+
</SelectPrimitive.ScrollDownButton>
|
48 |
+
))
|
49 |
+
SelectScrollDownButton.displayName =
|
50 |
+
SelectPrimitive.ScrollDownButton.displayName
|
51 |
+
|
52 |
+
const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
|
53 |
+
<SelectPrimitive.Portal>
|
54 |
+
<SelectPrimitive.Content
|
55 |
+
ref={ref}
|
56 |
+
className={cn(
|
57 |
+
"relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
|
58 |
+
position === "popper" &&
|
59 |
+
"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
|
60 |
+
className
|
61 |
+
)}
|
62 |
+
position={position}
|
63 |
+
{...props}>
|
64 |
+
<SelectScrollUpButton />
|
65 |
+
<SelectPrimitive.Viewport
|
66 |
+
className={cn("p-1", position === "popper" &&
|
67 |
+
"h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]")}>
|
68 |
+
{children}
|
69 |
+
</SelectPrimitive.Viewport>
|
70 |
+
<SelectScrollDownButton />
|
71 |
+
</SelectPrimitive.Content>
|
72 |
+
</SelectPrimitive.Portal>
|
73 |
+
))
|
74 |
+
SelectContent.displayName = SelectPrimitive.Content.displayName
|
75 |
+
|
76 |
+
const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
|
77 |
+
<SelectPrimitive.Label
|
78 |
+
ref={ref}
|
79 |
+
className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
|
80 |
+
{...props} />
|
81 |
+
))
|
82 |
+
SelectLabel.displayName = SelectPrimitive.Label.displayName
|
83 |
+
|
84 |
+
const SelectItem = React.forwardRef(({ className, children, ...props }, ref) => (
|
85 |
+
<SelectPrimitive.Item
|
86 |
+
ref={ref}
|
87 |
+
className={cn(
|
88 |
+
"relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
|
89 |
+
className
|
90 |
+
)}
|
91 |
+
{...props}>
|
92 |
+
<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
|
93 |
+
<SelectPrimitive.ItemIndicator>
|
94 |
+
<Check className="h-4 w-4" />
|
95 |
+
</SelectPrimitive.ItemIndicator>
|
96 |
+
</span>
|
97 |
+
|
98 |
+
<SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
|
99 |
+
</SelectPrimitive.Item>
|
100 |
+
))
|
101 |
+
SelectItem.displayName = SelectPrimitive.Item.displayName
|
102 |
+
|
103 |
+
const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
|
104 |
+
<SelectPrimitive.Separator
|
105 |
+
ref={ref}
|
106 |
+
className={cn("-mx-1 my-1 h-px bg-muted", className)}
|
107 |
+
{...props} />
|
108 |
+
))
|
109 |
+
SelectSeparator.displayName = SelectPrimitive.Separator.displayName
|
110 |
+
|
111 |
+
export {
|
112 |
+
Select,
|
113 |
+
SelectGroup,
|
114 |
+
SelectValue,
|
115 |
+
SelectTrigger,
|
116 |
+
SelectContent,
|
117 |
+
SelectLabel,
|
118 |
+
SelectItem,
|
119 |
+
SelectSeparator,
|
120 |
+
SelectScrollUpButton,
|
121 |
+
SelectScrollDownButton,
|
122 |
+
}
|
web/src/index.css
ADDED
@@ -0,0 +1,29 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
@tailwind base;
|
2 |
+
@tailwind components;
|
3 |
+
@tailwind utilities;
|
4 |
+
|
5 |
+
|
6 |
+
@layer base {
|
7 |
+
:root {
|
8 |
+
--background: 224 71.4% 4.1%;
|
9 |
+
--foreground: 210 20% 98%;
|
10 |
+
--card: 224 71.4% 4.1%;
|
11 |
+
--card-foreground: 210 20% 98%;
|
12 |
+
--popover: 224 71.4% 4.1%;
|
13 |
+
--popover-foreground: 210 20% 98%;
|
14 |
+
--primary: 263.4 70% 50.4%;
|
15 |
+
--primary-foreground: 210 20% 98%;
|
16 |
+
--secondary: 215 27.9% 16.9%;
|
17 |
+
--secondary-foreground: 210 20% 98%;
|
18 |
+
--muted: 215 27.9% 16.9%;
|
19 |
+
--muted-foreground: 217.9 10.6% 64.9%;
|
20 |
+
--accent: 215 27.9% 16.9%;
|
21 |
+
--accent-foreground: 210 20% 98%;
|
22 |
+
--destructive: 0 62.8% 30.6%;
|
23 |
+
--destructive-foreground: 210 20% 98%;
|
24 |
+
--border: 215 27.9% 16.9%;
|
25 |
+
--input: 215 27.9% 16.9%;
|
26 |
+
--ring: 263.4 70% 50.4%;
|
27 |
+
--radius: 0.5rem;
|
28 |
+
}
|
29 |
+
}
|
web/src/lib/utils.js
ADDED
@@ -0,0 +1,6 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { clsx } from "clsx"
|
2 |
+
import { twMerge } from "tailwind-merge"
|
3 |
+
|
4 |
+
export function cn(...inputs) {
|
5 |
+
return twMerge(clsx(inputs))
|
6 |
+
}
|
web/src/main.jsx
ADDED
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import React from 'react'
|
2 |
+
import ReactDOM from 'react-dom/client'
|
3 |
+
import App from './App.jsx'
|
4 |
+
import './index.css'
|
5 |
+
|
6 |
+
ReactDOM.createRoot(document.getElementById('root')).render(
|
7 |
+
<React.StrictMode>
|
8 |
+
<App />
|
9 |
+
</React.StrictMode>,
|
10 |
+
)
|
web/tailwind.config.js
ADDED
@@ -0,0 +1,80 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
/** @type {import('tailwindcss').Config} */
|
2 |
+
module.exports = {
|
3 |
+
darkMode: ["class"],
|
4 |
+
content: [
|
5 |
+
'./pages/**/*.{js,jsx}',
|
6 |
+
'./components/**/*.{js,jsx}',
|
7 |
+
'./app/**/*.{js,jsx}',
|
8 |
+
'./src/**/*.{js,jsx}',
|
9 |
+
],
|
10 |
+
prefix: "",
|
11 |
+
theme: {
|
12 |
+
container: {
|
13 |
+
center: true,
|
14 |
+
padding: "2rem",
|
15 |
+
screens: {
|
16 |
+
"2xl": "1400px",
|
17 |
+
},
|
18 |
+
},
|
19 |
+
extend: {
|
20 |
+
fontFamily: {
|
21 |
+
sans: ["Inter", "sans-serif"],
|
22 |
+
},
|
23 |
+
colors: {
|
24 |
+
border: "hsl(var(--border))",
|
25 |
+
input: "hsl(var(--input))",
|
26 |
+
ring: "hsl(var(--ring))",
|
27 |
+
background: "hsl(var(--background))",
|
28 |
+
foreground: "hsl(var(--foreground))",
|
29 |
+
primary: {
|
30 |
+
DEFAULT: "hsl(var(--primary))",
|
31 |
+
foreground: "hsl(var(--primary-foreground))",
|
32 |
+
},
|
33 |
+
secondary: {
|
34 |
+
DEFAULT: "hsl(var(--secondary))",
|
35 |
+
foreground: "hsl(var(--secondary-foreground))",
|
36 |
+
},
|
37 |
+
destructive: {
|
38 |
+
DEFAULT: "hsl(var(--destructive))",
|
39 |
+
foreground: "hsl(var(--destructive-foreground))",
|
40 |
+
},
|
41 |
+
muted: {
|
42 |
+
DEFAULT: "hsl(var(--muted))",
|
43 |
+
foreground: "hsl(var(--muted-foreground))",
|
44 |
+
},
|
45 |
+
accent: {
|
46 |
+
DEFAULT: "hsl(var(--accent))",
|
47 |
+
foreground: "hsl(var(--accent-foreground))",
|
48 |
+
},
|
49 |
+
popover: {
|
50 |
+
DEFAULT: "hsl(var(--popover))",
|
51 |
+
foreground: "hsl(var(--popover-foreground))",
|
52 |
+
},
|
53 |
+
card: {
|
54 |
+
DEFAULT: "hsl(var(--card))",
|
55 |
+
foreground: "hsl(var(--card-foreground))",
|
56 |
+
},
|
57 |
+
},
|
58 |
+
borderRadius: {
|
59 |
+
lg: "var(--radius)",
|
60 |
+
md: "calc(var(--radius) - 2px)",
|
61 |
+
sm: "calc(var(--radius) - 4px)",
|
62 |
+
},
|
63 |
+
keyframes: {
|
64 |
+
"accordion-down": {
|
65 |
+
from: { height: "0" },
|
66 |
+
to: { height: "var(--radix-accordion-content-height)" },
|
67 |
+
},
|
68 |
+
"accordion-up": {
|
69 |
+
from: { height: "var(--radix-accordion-content-height)" },
|
70 |
+
to: { height: "0" },
|
71 |
+
},
|
72 |
+
},
|
73 |
+
animation: {
|
74 |
+
"accordion-down": "accordion-down 0.2s ease-out",
|
75 |
+
"accordion-up": "accordion-up 0.2s ease-out",
|
76 |
+
},
|
77 |
+
},
|
78 |
+
},
|
79 |
+
plugins: [require("tailwindcss-animate")],
|
80 |
+
}
|
web/tsconfig.json
ADDED
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
{
|
2 |
+
"compilerOptions": {
|
3 |
+
"baseUrl": ".",
|
4 |
+
"paths": {
|
5 |
+
"@/*": [
|
6 |
+
"./src/*"
|
7 |
+
]
|
8 |
+
}
|
9 |
+
}
|
10 |
+
}
|
web/vite.config.js
ADDED
@@ -0,0 +1,15 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
import { defineConfig } from 'vite'
|
2 |
+
import react from '@vitejs/plugin-react'
|
3 |
+
import path from "path"
|
4 |
+
|
5 |
+
const __dirname = path.resolve();
|
6 |
+
|
7 |
+
// https://vitejs.dev/config/
|
8 |
+
export default defineConfig({
|
9 |
+
plugins: [react()],
|
10 |
+
resolve: {
|
11 |
+
alias: {
|
12 |
+
"@": path.resolve(__dirname, "src")
|
13 |
+
},
|
14 |
+
},
|
15 |
+
})
|