starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-25 10:18:31 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Radix, request methods, and theme stuff

Browse Source
This commit is contained in:
Gregory Schier
2023-02-18 15:53:03 -08:00
parent e69ccb62da
commit 92f0ead969
17 changed files with 6989 additions and 54 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.nvmrc Normal file
View File

@@ -0,0 +1 @@
18

1
index.html
View File

@@ -9,6 +9,7 @@
<body> <body>
<div id="root"></div> <div id="root"></div>
<div id="radix-portal"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="/src/main.tsx"></script>
</body> </body>
</html> </html>

6401
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

7
package.json
View File

@@ -14,6 +14,9 @@
"@codemirror/lang-html": "^6.4.2", "@codemirror/lang-html": "^6.4.2",
"@codemirror/lang-javascript": "^6.1.4", "@codemirror/lang-javascript": "^6.1.4",
"@codemirror/lang-json": "^6.0.1", "@codemirror/lang-json": "^6.0.1",
"@radix-ui/react-dropdown-menu": "^2.0.2",
"@radix-ui/react-icons": "^1.2.0",
"@radix-ui/react-popover": "1.0.3",
"@tauri-apps/api": "^1.2.0", "@tauri-apps/api": "^1.2.0",
"@typescript-eslint/eslint-plugin": "^5.52.0", "@typescript-eslint/eslint-plugin": "^5.52.0",
"@typescript-eslint/parser": "^5.52.0", "@typescript-eslint/parser": "^5.52.0",
@@ -24,9 +27,11 @@
"eslint-plugin-import": "^2.27.5", "eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-jsx-a11y": "^6.7.1",
"eslint-plugin-react": "^7.32.2", "eslint-plugin-react": "^7.32.2",
"framer-motion": "^9.0.4",
"prettier": "^2.8.4", "prettier": "^2.8.4",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0" "react-dom": "^18.2.0",
"react-helmet-async": "^1.3.0"
}, },
"devDependencies": { "devDependencies": {
"@tauri-apps/cli": "^1.2.2", "@tauri-apps/cli": "^1.2.2",

0
plugins/plugin.ts → src-tauri/plugins/plugin.ts
View File

50
src-tauri/src/commands.rs
View File

@@ -1,14 +1,24 @@
use http::header::{HeaderName, CONTENT_TYPE, USER_AGENT};
use http::{HeaderMap, HeaderValue, Method};
use reqwest::redirect::Policy;
use tauri::{AppHandle, Wry};
#[derive(serde::Serialize)] #[derive(serde::Serialize)]
pub struct CustomResponse { pub struct CustomResponse {
status: String, status: String,
body: String, body: String,
url: String,
method: String,
elapsed: u128, elapsed: u128,
elapsed2: u128, elapsed2: u128,
url: String,
} }
#[tauri::command] #[tauri::command]
pub async fn send_request(url: &str) -> Result<CustomResponse, String> { pub async fn send_request(
app_handle: AppHandle<Wry>,
url: &str,
method: &str,
) -> Result<CustomResponse, String> {
let start = std::time::Instant::now(); let start = std::time::Instant::now();
let mut abs_url = url.to_string(); let mut abs_url = url.to_string();
@@ -16,10 +26,36 @@ pub async fn send_request(url: &str) -> Result<CustomResponse, String> {
abs_url = format!("http://{}", url); abs_url = format!("http://{}", url);
} }
let resp = reqwest::get(abs_url.to_string()).await; let client = reqwest::Client::builder()
.redirect(Policy::none())
.build()
.unwrap();
let mut headers = HeaderMap::new();
// headers.insert(CONTENT_TYPE, HeaderValue::from_static("image/png"));
headers.insert(USER_AGENT, HeaderValue::from_static("reqwest"));
headers.insert("x-foo-bar", HeaderValue::from_static("hi mom"));
headers.insert(
HeaderName::from_static("x-api-key"),
HeaderValue::from_static("123-123-123"),
);
let m = Method::from_bytes(method.to_uppercase().as_bytes()).unwrap();
let req = client
.request(m, abs_url.to_string())
.headers(headers)
.build()
.unwrap();
let resp = client.execute(req).await;
let elapsed = start.elapsed().as_millis(); let elapsed = start.elapsed().as_millis();
crate::runtime::run_plugin_sync("../plugins/plugin.ts").unwrap(); let p = app_handle
.path_resolver()
.resolve_resource("plugins/plugin.ts")
.expect("failed to resolve resource");
crate::runtime::run_plugin_sync(p.to_str().unwrap()).unwrap();
match resp { match resp {
Ok(v) => { Ok(v) => {
@@ -32,10 +68,14 @@ pub async fn send_request(url: &str) -> Result<CustomResponse, String> {
body, body,
elapsed, elapsed,
elapsed2, elapsed2,
method: method.to_string(),
url: url2, url: url2,
}) })
} }
Err(e) => Err(e.to_string()), Err(e) => {
println!("Error: {}", e);
Err(e.to_string())
}
} }
} }

10
src-tauri/tauri.conf.json
View File

@@ -19,6 +19,11 @@
}, },
"window": { "window": {
"startDragging": true "startDragging": true
},
"fs": {
"scope": [
"$RESOURCE/*"
]
} }
}, },
"bundle": { "bundle": {
@@ -45,7 +50,9 @@
"providerShortName": null, "providerShortName": null,
"signingIdentity": null "signingIdentity": null
}, },
"resources": [], "resources": [
"plugins/*"
],
"shortDescription": "", "shortDescription": "",
"targets": "all", "targets": "all",
"windows": { "windows": {
@@ -67,7 +74,6 @@
"resizable": true, "resizable": true,
"title": "Twosomnia", "title": "Twosomnia",
"width": 1400, "width": 1400,
"theme": "Dark",
"titleBarStyle": "Overlay", "titleBarStyle": "Overlay",
"hiddenTitle": true "hiddenTitle": true
} }

40
src/App.tsx
View File

@@ -1,13 +1,16 @@
import { FormEvent, useState } from 'react'; import { FormEvent, useState } from 'react';
import { Helmet } from 'react-helmet-async';
import { invoke } from '@tauri-apps/api/tauri'; import { invoke } from '@tauri-apps/api/tauri';
import Editor from './components/Editor/Editor'; import Editor from './components/Editor/Editor';
import { Input } from './components/Input'; import { Input } from './components/Input';
import { Stacks } from './components/Stacks'; import { Stacks } from './components/Stacks';
import { Button } from './components/Button'; import { Button } from './components/Button';
import { Grid } from './components/Grid'; import { Grid } from './components/Grid';
import { Dropdown, DropdownMenuRadio } from './components/Dropdown.tsx';
interface Response { interface Response {
url: string; url: string;
method: string;
body: string; body: string;
status: string; status: string;
elapsed: number; elapsed: number;
@@ -16,13 +19,14 @@ interface Response {
function App() { function App() {
const [responseBody, setResponseBody] = useState<Response | null>(null); const [responseBody, setResponseBody] = useState<Response | null>(null);
const [url, setUrl] = useState('schier.co'); const [url, setUrl] = useState('https://go-server.schier.dev/debug');
const [loading, setLoading] = useState(false); const [loading, setLoading] = useState(false);
const [method, setMethod] = useState<string>('get');
async function sendRequest(e: FormEvent<HTMLFormElement>) { async function sendRequest(e: FormEvent<HTMLFormElement>) {
e.preventDefault(); e.preventDefault();
setLoading(true); setLoading(true);
const resp = (await invoke('send_request', { url: url })) as Response; const resp = (await invoke('send_request', { method, url })) as Response;
if (resp.body.includes('<head>')) { if (resp.body.includes('<head>')) {
resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`); resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
} }
@@ -31,26 +35,45 @@ function App() {
} }
return ( return (
<div className="absolute top-0 left-0 right-0 bottom-0 overflow-hidden"> <>
<div className="w-full h-7 bg-gray-800" data-tauri-drag-region></div> <Helmet>
<div className="p-12 bg-gray-900 h-full w-full overflow-auto"> <body className="bg-background" />
</Helmet>
<div className="w-full h-7 bg-gray-100" data-tauri-drag-region="" />
<div className="p-12 h-full w-full overflow-auto">
<h1 className="text-4xl font-semibold">Welcome, Friend!</h1> <h1 className="text-4xl font-semibold">Welcome, Friend!</h1>
<Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}> <Stacks as="form" className="mt-5 items-end" onSubmit={sendRequest}>
<DropdownMenuRadio
onValueChange={setMethod}
value={method}
items={[
{ label: 'GET', value: 'get' },
{ label: 'PUT', value: 'put' },
{ label: 'POST', value: 'post' },
]}
>
<Button className="mr-1" disabled={loading} color="secondary">
{method.toUpperCase()}
</Button>
</DropdownMenuRadio>
<Input <Input
hideLabel
name="url" name="url"
label="Enter URL" label="Enter URL"
className="mr-1" className="mr-1 w-[30rem]"
onChange={(e) => setUrl(e.currentTarget.value)} onChange={(e) => setUrl(e.currentTarget.value)}
value={url} value={url}
placeholder="Enter a URL..." placeholder="Enter a URL..."
/> />
<Button type="submit" disabled={loading}> <Button className="mr-1" type="submit" disabled={loading}>
{loading ? 'Sending...' : 'Send'} {loading ? 'Sending...' : 'Send'}
</Button> </Button>
</Stacks> </Stacks>
{responseBody !== null && ( {responseBody !== null && (
<> <>
<div className="pt-6"> <div className="pt-6">
{responseBody?.method.toUpperCase()}
&nbsp;&bull;&nbsp;
{responseBody?.status} {responseBody?.status}
&nbsp;&bull;&nbsp; &nbsp;&bull;&nbsp;
{responseBody?.elapsed}ms &nbsp;&bull;&nbsp; {responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
@@ -60,6 +83,7 @@ function App() {
<Editor value={responseBody?.body} /> <Editor value={responseBody?.body} />
<div className="iframe-wrapper"> <div className="iframe-wrapper">
<iframe <iframe
title="Response preview"
srcDoc={responseBody.body} srcDoc={responseBody.body}
sandbox="allow-scripts allow-same-origin" sandbox="allow-scripts allow-same-origin"
className="h-full w-full rounded-lg" className="h-full w-full rounded-lg"
@@ -69,7 +93,7 @@ function App() {
</> </>
)} )}
</div> </div>
</div> </>
); );
} }

24
src/components/Button.tsx
View File

@@ -1,8 +1,24 @@
import classnames from 'classnames'; import classnames from 'classnames';
import { ButtonHTMLAttributes } from 'react'; import { ButtonHTMLAttributes, forwardRef } from 'react';
export function Button({ className, ...props }: ButtonHTMLAttributes<HTMLButtonElement>) { type Props = ButtonHTMLAttributes<HTMLButtonElement> & {
color?: 'primary' | 'secondary';
};
export const Button = forwardRef(function Button(
{ className, color = 'primary', ...props }: Props,
ref,
) {
return ( return (
<button className={classnames(className, 'bg-blue-600 h-10 px-5 rounded-lg')} {...props} /> <button
ref={ref}
className={classnames(
className,
'h-10 px-5 rounded-lg text-white',
{ 'bg-blue-500': color === 'primary' },
{ 'bg-violet-500': color === 'secondary' },
)}
{...props}
/>
); );
} });

307
src/components/Dropdown.tsx Normal file
View File

@@ -0,0 +1,307 @@
import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
import { DropdownMenuRadioGroup } from '@radix-ui/react-dropdown-menu';
import { motion } from 'framer-motion';
import {
CheckIcon,
ChevronRightIcon,
DotFilledIcon,
HamburgerMenuIcon,
} from '@radix-ui/react-icons';
import { forwardRef, HTMLAttributes, ReactNode, useState } from 'react';
import { Button } from './Button.tsx';
import classnames from 'classnames';
import { HotKey } from './HotKey.tsx';
// eslint-disable-next-line @typescript-eslint/no-empty-interface
interface DropdownMenuRadioProps {
children: ReactNode;
onValueChange: (value: string) => void;
value: string;
items: {
label: string;
value: string;
};
}
export function DropdownMenuRadio({
children,
items,
onValueChange,
value,
}: DropdownMenuRadioProps) {
return (
<DropdownMenu.Root>
<DropdownMenuTrigger>{children}</DropdownMenuTrigger>
<DropdownMenuPortal>
<DropdownMenuContent>
<DropdownMenuRadioGroup onValueChange={onValueChange} value={value}>
{items.map((item) => (
<DropdownMenuRadioItem key={item.value} value={item.value}>
{item.label}
</DropdownMenuRadioItem>
))}
</DropdownMenuRadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu.Root>
);
}
export function Dropdown() {
const [bookmarksChecked, setBookmarksChecked] = useState(true);
const [urlsChecked, setUrlsChecked] = useState(false);
const [person, setPerson] = useState('pedro');
return (
<DropdownMenu.Root>
<DropdownMenu.Trigger asChild>
<Button aria-label="Customise options">
<HamburgerMenuIcon />
</Button>
</DropdownMenu.Trigger>
<DropdownMenuPortal>
<DropdownMenuContent>
<DropdownMenuItem rightSlot={<HotKey>⌘T</HotKey>}>New Tab</DropdownMenuItem>
<DropdownMenuItem rightSlot={<HotKey>⌘N</HotKey>}>New Window</DropdownMenuItem>
<DropdownMenuItem disabled rightSlot={<HotKey>⇧⌘N</HotKey>}>
New Private Window
</DropdownMenuItem>
<DropdownMenu.Sub>
<DropdownMenuSubTrigger rightSlot={<ChevronRightIcon />}>
More Tools
</DropdownMenuSubTrigger>
<DropdownMenuPortal>
<DropdownMenuSubContent>
<DropdownMenuItem rightSlot={<HotKey>⌘S</HotKey>}>Save Page As…</DropdownMenuItem>
<DropdownMenuItem>Create Shortcut…</DropdownMenuItem>
<DropdownMenuItem>Name Window…</DropdownMenuItem>
<DropdownMenuSeparator />
<DropdownMenuItem>Developer Tools</DropdownMenuItem>
</DropdownMenuSubContent>
</DropdownMenuPortal>
</DropdownMenu.Sub>
<DropdownMenuSeparator />
<DropdownMenuCheckboxItem
checked={bookmarksChecked}
onCheckedChange={setBookmarksChecked}
rightSlot={<HotKey>⌘B</HotKey>}
leftSlot={
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
<CheckIcon />
</DropdownMenu.ItemIndicator>
}
>
Show Bookmarks
</DropdownMenuCheckboxItem>
<DropdownMenuCheckboxItem
checked={urlsChecked}
onCheckedChange={setUrlsChecked}
leftSlot={
<DropdownMenu.ItemIndicator className="DropdownMenuItemIndicator">
<CheckIcon />
</DropdownMenu.ItemIndicator>
}
>
Show Full URLs
</DropdownMenuCheckboxItem>
<DropdownMenuSeparator />
<DropdownMenuLabel>People</DropdownMenuLabel>
<DropdownMenu.RadioGroup value={person} onValueChange={setPerson}>
<DropdownMenuRadioItem value="pedro">Pedro Duarte</DropdownMenuRadioItem>
<DropdownMenuRadioItem className="DropdownMenuRadioItem" value="colm">
Colm Tuite
</DropdownMenuRadioItem>
</DropdownMenu.RadioGroup>
</DropdownMenuContent>
</DropdownMenuPortal>
</DropdownMenu.Root>
);
}
const dropdownMenuClasses = 'bg-background rounded-md shadow-lg p-1.5 border border-gray-100';
const DropdownMenuPortal = forwardRef(function DropdownMenuPortal(
{ children }: { children: DropdownMenuContent },
ref,
) {
return (
<DropdownMenu.Portal ref={ref} asChild container={document.querySelector('#radix-portal')}>
<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }}>
{children}
</motion.div>
</DropdownMenu.Portal>
);
});
const DropdownMenuContent = forwardRef(function DropdownMenuContent(
{ className, children, ...props }: DropdownMenu.DropdownMenuContentProps,
ref,
) {
return (
<DropdownMenu.Content
ref={ref}
align="start"
className={classnames(className, dropdownMenuClasses, 'mt-1')}
{...props}
>
{children}
</DropdownMenu.Content>
);
});
type DropdownMenuItemProps = DropdownMenu.DropdownMenuItemProps & ItemInnerProps;
function DropdownMenuItem({
leftSlot,
rightSlot,
className,
children,
...props
}: DropdownMenuItemProps) {
return (
<DropdownMenu.Item
asChild
className={classnames(className, { 'opacity-30': props.disabled })}
{...props}
>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</DropdownMenu.Item>
);
}
type DropdownMenuCheckboxItemProps = DropdownMenu.DropdownMenuCheckboxItemProps & ItemInnerProps;
function DropdownMenuCheckboxItem({
leftSlot,
rightSlot,
children,
...props
}: DropdownMenuCheckboxItemProps) {
return (
<DropdownMenu.CheckboxItem asChild {...props}>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</DropdownMenu.CheckboxItem>
);
}
type DropdownMenuSubTriggerProps = DropdownMenu.DropdownMenuSubTriggerProps & ItemInnerProps;
function DropdownMenuSubTrigger({
leftSlot,
rightSlot,
children,
...props
}: DropdownMenuSubTriggerProps) {
return (
<DropdownMenu.SubTrigger asChild {...props}>
<ItemInner leftSlot={leftSlot} rightSlot={rightSlot}>
{children}
</ItemInner>
</DropdownMenu.SubTrigger>
);
}
type DropdownMenuRadioItemProps = Omit<
DropdownMenu.DropdownMenuRadioItemProps & ItemInnerProps,
'leftSlot'
>;
function DropdownMenuRadioItem({ rightSlot, children, ...props }: DropdownMenuRadioItemProps) {
return (
<DropdownMenu.RadioItem asChild {...props}>
<ItemInner
leftSlot={
<DropdownMenu.ItemIndicator>
<DotFilledIcon />
</DropdownMenu.ItemIndicator>
}
rightSlot={rightSlot}
>
{children}
</ItemInner>
</DropdownMenu.RadioItem>
);
}
const DropdownMenuSubContent = forwardRef(function DropdownMenuSubContent(
{ className, ...props }: DropdownMenu.DropdownMenuSubContentProps,
ref,
) {
return (
<DropdownMenu.SubContent
ref={ref}
alignOffset={0}
sideOffset={4}
className={classnames(className, dropdownMenuClasses)}
{...props}
/>
);
});
function DropdownMenuLabel({ className, children, ...props }: DropdownMenu.DropdownMenuLabelProps) {
return (
<DropdownMenu.Label asChild {...props}>
<ItemInner noHover className={classnames(className, 'opacity-50 uppercase text-sm')}>
{children}
</ItemInner>
</DropdownMenu.Label>
);
}
function DropdownMenuSeparator({ className, ...props }: DropdownMenu.DropdownMenuSeparatorProps) {
return (
<DropdownMenu.Separator
className={classnames(className, 'h-[1px] bg-gray-400 bg-opacity-30 my-1')}
{...props}
/>
);
}
function DropdownMenuTrigger({ className, ...props }: DropdownMenu.DropdownMenuTriggerProps) {
return (
<DropdownMenu.Trigger
asChild
className={classnames(className, 'focus:outline-none')}
{...props}
/>
);
}
interface ItemInnerProps extends HTMLAttributes<HTMLDivElement> {
leftSlot?: ReactNode;
rightSlot?: ReactNode;
children: ReactNode;
noHover?: boolean;
}
const ItemInner = forwardRef(function ItemInner(
{ leftSlot, rightSlot, children, className, noHover, ...props }: ItemInnerProps,
ref,
) {
return (
<div
ref={ref}
className={classnames(
className,
'outline-none px-2 py-1.5 flex items-center text-sm text-gray-700',
{
'focus:bg-gray-50 focus:text-gray-900 rounded': !noHover,
},
)}
{...props}
>
<div className="w-7">{leftSlot}</div>
<div>{children}</div>
{rightSlot && <div className="ml-auto pl-3">{rightSlot}</div>}
</div>
);
});

22
src/components/Editor/Editor.css
View File

@@ -1,8 +1,24 @@
.iframe-wrapper, .cm-editor { .cm-editor {
width: 100%; width: 100%;
height: 30rem; height: calc(100vh - 270px);
border-radius: 0.5rem;
overflow: hidden; overflow: hidden;
border-radius: var(--border-radius-lg);
}
.cm-editor .cm-scroller {
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: var(--border-radius-lg);
background-color: hsl(var(--color-gray-50));
}
.cm-editor .cm-line {
padding-left: 1.5em;
padding-right: 1.5em;
}
.cm-editor * {
cursor: text;
} }
.cm-editor.cm-focused { .cm-editor.cm-focused {

2
src/components/Editor/Editor.tsx
View File

@@ -7,5 +7,5 @@ interface Props {
export default function Editor(props: Props) { export default function Editor(props: Props) {
const { ref } = useCodeMirror({ value: props.value }); const { ref } = useCodeMirror({ value: props.value });
return <div ref={ref} className="m-0 text-sm rounded-lg bg-gray-800 overflow-hidden" />; return <div ref={ref} className="m-0 text-sm overflow-hidden" />;
} }

15
src/components/HotKey.tsx Normal file
View File

@@ -0,0 +1,15 @@
import { HTMLAttributes } from 'react';
import classnames from 'classnames';
export function HotKey({ children }: HTMLAttributes<HTMLSpanElement>) {
return (
<span
className={classnames(
'bg-gray-400 bg-opacity-20 px-1.5 py-0.5 rounded text-sm',
'font-mono text-gray-500 tracking-widest',
)}
>
{children}
</span>
);
}

12
src/components/Input.tsx
View File

@@ -5,19 +5,19 @@ import { VStack } from './Stacks';
interface Props extends InputHTMLAttributes<HTMLInputElement> { interface Props extends InputHTMLAttributes<HTMLInputElement> {
name: string; name: string;
label: string; label: string;
hideLabel?: boolean;
labelClassName?: string; labelClassName?: string;
} }
export function Input({ label, labelClassName, className, name, ...props }: Props) { export function Input({ label, labelClassName, hideLabel, className, name, ...props }: Props) {
const id = `input-${name}`; const id = `input-${name}`;
return ( return (
<VStack> <VStack>
<label <label
htmlFor={name} htmlFor={name}
className={classnames( className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
labelClassName, 'sr-only': hideLabel,
'font-semibold text-sm uppercase text-gray-700 dark:text-gray-300', })}
)}
> >
{label} {label}
</label> </label>
@@ -25,7 +25,7 @@ export function Input({ label, labelClassName, className, name, ...props }: Prop
id={id} id={id}
className={classnames( className={classnames(
className, className,
'border-2 border-gray-700 bg-gray-100 dark:bg-gray-800 h-10 px-5 rounded-lg text-sm focus:outline-none', 'border-2 border-gray-100 bg-gray-50 h-10 pl-5 pr-2 rounded-lg text-sm focus:outline-none',
)} )}
{...props} {...props}
/> />

96
src/main.css
View File

@@ -3,13 +3,101 @@
@tailwind utilities; @tailwind utilities;
:root { :root {
color-scheme: light dark; color-scheme: light dark;
} }
:not(input):not(textarea), :not(input):not(textarea),
:not(input):not(textarea)::after, :not(input):not(textarea)::after,
:not(input):not(textarea)::before { :not(input):not(textarea)::before {
-webkit-user-select: none; -webkit-user-select: none;
user-select: none; user-select: none;
cursor: default; cursor: default;
}
@layer base {
:root {
/* Colors */
--color-white: 255 100% 100%;
--color-background: var(--color-white);
--color-blue-50: 217 91% 95%;
--color-blue-100: 217 91% 88%;
--color-blue-200: 217 91% 76%;
--color-blue-300: 217 91% 70%;
--color-blue-400: 217 91% 65%;
--color-blue-500: 217 91% 58%;
--color-blue-600: 217 91% 43%;
--color-blue-700: 217 91% 30%;
--color-blue-800: 217 91% 20%;
--color-blue-900: 217 91% 10%;
--color-violet-50: 258 90% 95%;
--color-violet-100: 258 90% 88%;
--color-violet-200: 258 90% 76%;
--color-violet-300: 258 90% 70%;
--color-violet-400: 258 90% 65%;
--color-violet-500: 258 90% 58%;
--color-violet-600: 258 90% 43%;
--color-violet-700: 258 90% 30%;
--color-violet-800: 258 90% 20%;
--color-violet-900: 258 90% 10%;
--color-gray-50: 217 21% 95%;
--color-gray-100: 217 21% 88%;
--color-gray-200: 217 21% 76%;
--color-gray-300: 217 21% 70%;
--color-gray-400: 217 21% 65%;
--color-gray-500: 217 21% 58%;
--color-gray-600: 217 21% 43%;
--color-gray-700: 217 21% 30%;
--color-gray-800: 217 21% 20%;
--color-gray-900: 217 21% 10%;
/* Border Radius */
--border-radius-sm: 0.125rem;
--border-radius: 0.25rem;
--border-radius-md: 0.375rem;
--border-radius-lg: 0.5rem;
}
@media (prefers-color-scheme: dark) {
:root {
--color-white: 255 100% 100%;
--color-background: 217 21% 7%;
--color-blue-900: 217 91% 95%;
--color-blue-800: 217 91% 88%;
--color-blue-700: 217 91% 76%;
--color-blue-600: 217 91% 70%;
--color-blue-500: 217 91% 65%;
--color-blue-400: 217 91% 58%;
--color-blue-300: 217 91% 43%;
--color-blue-200: 217 91% 30%;
--color-blue-100: 217 91% 20%;
--color-blue-50: 217 91% 10%;
--color-violet-900: 258 90% 95%;
--color-violet-800: 258 90% 88%;
--color-violet-700: 258 90% 76%;
--color-violet-600: 258 90% 70%;
--color-violet-500: 258 90% 65%;
--color-violet-400: 258 90% 58%;
--color-violet-300: 258 90% 43%;
--color-violet-200: 258 90% 30%;
--color-violet-100: 258 90% 20%;
--color-violet-50: 258 90% 10%;
--color-gray-900: 217 21% 95%;
--color-gray-800: 217 21% 88%;
--color-gray-700: 217 21% 76%;
--color-gray-600: 217 21% 70%;
--color-gray-500: 217 21% 65%;
--color-gray-400: 217 21% 58%;
--color-gray-300: 217 21% 43%;
--color-gray-200: 217 21% 30%;
--color-gray-100: 217 21% 25%;
--color-gray-50: 217 21% 15%;
}
}
} }

9
src/main.tsx
View File

@@ -1,10 +1,17 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import App from './App'; import App from './App';
import { HelmetProvider } from 'react-helmet-async';
import { MotionConfig } from 'framer-motion';
import './main.css'; import './main.css';
ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render( ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
<React.StrictMode> <React.StrictMode>
<App /> <MotionConfig transition={{ duration: 0.15 }}>
<HelmetProvider>
<App />
</HelmetProvider>
</MotionConfig>
</React.StrictMode>, </React.StrictMode>,
); );

46
tailwind.config.cjs
View File

@@ -1,11 +1,41 @@
/** @type {import('tailwindcss').Config} */ /** @type {import('tailwindcss').Config} */
module.exports = { module.exports = {
content: [ content: [
"./index.html", "./index.html",
"./src/**/*.{js,ts,jsx,tsx}", "./src/**/*.{js,ts,jsx,tsx}",
], ],
theme: { theme: {
extend: {}, extend: {},
}, borderRadius: {
plugins: [], none: '0px',
sm: 'var(--border-radius-sm)',
DEFAULT: 'var(--border-radius)',
md: 'var(--border-radius-md)',
lg: 'var(--border-radius-lg)',
full: '9999px',
},
colors: {
white: 'hsl(var(--color-white) / <alpha-value>)',
background: 'hsl(var(--color-background) / <alpha-value>)',
gray: color('gray'),
blue: color('blue'),
violet: color('violet'),
}
},
plugins: [],
}
function color(name) {
return {
50: `hsl(var(--color-${name}-50) / <alpha-value>)`,
100: `hsl(var(--color-${name}-100) / <alpha-value>)`,
200: `hsl(var(--color-${name}-200) / <alpha-value>)`,
300: `hsl(var(--color-${name}-300) / <alpha-value>)`,
400: `hsl(var(--color-${name}-400) / <alpha-value>)`,
500: `hsl(var(--color-${name}-500) / <alpha-value>)`,
600: `hsl(var(--color-${name}-600) / <alpha-value>)`,
700: `hsl(var(--color-${name}-700) / <alpha-value>)`,
800: `hsl(var(--color-${name}-800) / <alpha-value>)`,
900: `hsl(var(--color-${name}-900) / <alpha-value>)`,
}
} }