Radix, request methods, and theme stuff

2026-03-11 17:46:41 -05:00 · 2023-02-18 15:53:03 -08:00
parent e69ccb62da
commit 92f0ead969
17 changed files with 6989 additions and 54 deletions
--- a/.nvmrc
+++ b/.nvmrc
@@ -0,0 +1 @@
+18
--- a/index.html
+++ b/index.html
@@ -9,6 +9,7 @@

  <body>
    <div id="root"></div>
+    <div id="radix-portal"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
 </html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -14,6 +14,9 @@
    "@codemirror/lang-html": "^6.4.2",
    "@codemirror/lang-javascript": "^6.1.4",
    "@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",
    "@typescript-eslint/eslint-plugin": "^5.52.0",
    "@typescript-eslint/parser": "^5.52.0",
@@ -24,9 +27,11 @@
    "eslint-plugin-import": "^2.27.5",
    "eslint-plugin-jsx-a11y": "^6.7.1",
    "eslint-plugin-react": "^7.32.2",
+    "framer-motion": "^9.0.4",
    "prettier": "^2.8.4",
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "react-helmet-async": "^1.3.0"
  },
  "devDependencies": {
    "@tauri-apps/cli": "^1.2.2",
--- a/src-tauri/plugins/plugin.ts
+++ b/src-tauri/plugins/plugin.ts
--- a/src-tauri/src/commands.rs
+++ b/src-tauri/src/commands.rs
@@ -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)]
 pub struct CustomResponse {
    status: String,
    body: String,
+    url: String,
+    method: String,
    elapsed: u128,
    elapsed2: u128,
-    url: String,
 }

 #[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 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);
    }

-    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();

-    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 {
        Ok(v) => {
@@ -32,10 +68,14 @@ pub async fn send_request(url: &str) -> Result<CustomResponse, String> {
                body,
                elapsed,
                elapsed2,
+                method: method.to_string(),
                url: url2,
            })
        }
-        Err(e) => Err(e.to_string()),
+        Err(e) => {
+            println!("Error: {}", e);
+            Err(e.to_string())
+        }
    }
 }

--- a/src-tauri/tauri.conf.json
+++ b/src-tauri/tauri.conf.json
@@ -19,6 +19,11 @@
      },
      "window": {
        "startDragging": true
+      },
+      "fs": {
+        "scope": [
+          "$RESOURCE/*"
+        ]
      }
    },
    "bundle": {
@@ -45,7 +50,9 @@
        "providerShortName": null,
        "signingIdentity": null
      },
-      "resources": [],
+      "resources": [
+        "plugins/*"
+      ],
      "shortDescription": "",
      "targets": "all",
      "windows": {
@@ -67,7 +74,6 @@
        "resizable": true,
        "title": "Twosomnia",
        "width": 1400,
-        "theme": "Dark",
        "titleBarStyle": "Overlay",
        "hiddenTitle": true
      }
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,13 +1,16 @@
 import { FormEvent, useState } from 'react';
+import { Helmet } from 'react-helmet-async';
 import { invoke } from '@tauri-apps/api/tauri';
 import Editor from './components/Editor/Editor';
 import { Input } from './components/Input';
 import { Stacks } from './components/Stacks';
 import { Button } from './components/Button';
 import { Grid } from './components/Grid';
+import { Dropdown, DropdownMenuRadio } from './components/Dropdown.tsx';

 interface Response {
  url: string;
+  method: string;
  body: string;
  status: string;
  elapsed: number;
@@ -16,13 +19,14 @@ interface Response {

 function App() {
  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 [method, setMethod] = useState<string>('get');

  async function sendRequest(e: FormEvent<HTMLFormElement>) {
    e.preventDefault();
    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>')) {
      resp.body = resp.body.replace(/<head>/gi, `<head><base href="${resp.url}"/>`);
    }
@@ -31,26 +35,45 @@ function App() {
  }

  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>
-      <div className="p-12 bg-gray-900 h-full w-full overflow-auto">
+    <>
+      <Helmet>
+        <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>
        <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
+            hideLabel
            name="url"
            label="Enter URL"
-            className="mr-1"
+            className="mr-1 w-[30rem]"
            onChange={(e) => setUrl(e.currentTarget.value)}
            value={url}
            placeholder="Enter a URL..."
          />
-          <Button type="submit" disabled={loading}>
+          <Button className="mr-1" type="submit" disabled={loading}>
            {loading ? 'Sending...' : 'Send'}
          </Button>
        </Stacks>
        {responseBody !== null && (
          <>
            <div className="pt-6">
+              {responseBody?.method.toUpperCase()}
+              &nbsp;&bull;&nbsp;
              {responseBody?.status}
              &nbsp;&bull;&nbsp;
              {responseBody?.elapsed}ms &nbsp;&bull;&nbsp;
@@ -60,6 +83,7 @@ function App() {
              <Editor value={responseBody?.body} />
              <div className="iframe-wrapper">
                <iframe
+                  title="Response preview"
                  srcDoc={responseBody.body}
                  sandbox="allow-scripts allow-same-origin"
                  className="h-full w-full rounded-lg"
@@ -69,7 +93,7 @@ function App() {
          </>
        )}
      </div>
-    </div>
+    </>
  );
 }

--- a/src/components/Button.tsx
+++ b/src/components/Button.tsx
@@ -1,8 +1,24 @@
 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 (
-    <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}
+    />
  );
-}
+});
--- a/src/components/Dropdown.tsx
+++ b/src/components/Dropdown.tsx
@@ -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>
+  );
+});
--- a/src/components/Editor/Editor.css
+++ b/src/components/Editor/Editor.css
@@ -1,8 +1,24 @@
-.iframe-wrapper, .cm-editor {
+.cm-editor {
    width: 100%;
-    height: 30rem;
-    border-radius: 0.5rem;
+    height: calc(100vh - 270px);
    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 {
--- a/src/components/Editor/Editor.tsx
+++ b/src/components/Editor/Editor.tsx
@@ -7,5 +7,5 @@ interface Props {

 export default function Editor(props: Props) {
  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" />;
 }
--- a/src/components/HotKey.tsx
+++ b/src/components/HotKey.tsx
@@ -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>
+  );
+}
--- a/src/components/Input.tsx
+++ b/src/components/Input.tsx
@@ -5,19 +5,19 @@ import { VStack } from './Stacks';
 interface Props extends InputHTMLAttributes<HTMLInputElement> {
  name: string;
  label: string;
+  hideLabel?: boolean;
  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}`;
  return (
    <VStack>
      <label
        htmlFor={name}
-        className={classnames(
-          labelClassName,
-          'font-semibold text-sm uppercase text-gray-700 dark:text-gray-300',
-        )}
+        className={classnames(labelClassName, 'font-semibold text-sm uppercase text-gray-700', {
+          'sr-only': hideLabel,
+        })}
      >
        {label}
      </label>
@@ -25,7 +25,7 @@ export function Input({ label, labelClassName, className, name, ...props }: Prop
        id={id}
        className={classnames(
          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}
      />
--- a/src/main.css
+++ b/src/main.css
@@ -3,13 +3,101 @@
@tailwind utilities;

 :root {
-  color-scheme: light dark;
+    color-scheme: light dark;
 }

 :not(input):not(textarea),
 :not(input):not(textarea)::after,
 :not(input):not(textarea)::before {
-  -webkit-user-select: none;
-  user-select: none;
-  cursor: default;
+    -webkit-user-select: none;
+    user-select: none;
+    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%;
+        }
+    }
 }
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import App from './App';
+import { HelmetProvider } from 'react-helmet-async';
+import { MotionConfig } from 'framer-motion';
+
 import './main.css';

 ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
  <React.StrictMode>
-    <App />
+    <MotionConfig transition={{ duration: 0.15 }}>
+      <HelmetProvider>
+        <App />
+      </HelmetProvider>
+    </MotionConfig>
  </React.StrictMode>,
 );
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -1,11 +1,41 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [
-    "./index.html",
-    "./src/**/*.{js,ts,jsx,tsx}",
-  ],
-  theme: {
-    extend: {},
-  },
-  plugins: [],
+    content: [
+        "./index.html",
+        "./src/**/*.{js,ts,jsx,tsx}",
+    ],
+    theme: {
+        extend: {},
+        borderRadius: {
+            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>)`,
+    }
 }