feat: project init

src/components/layouts/auth-layout.tsx

@@ -0,0 +1,5 @@
+const AuthLayout = () => {
+  return <div>AuthLayout</div>;
+};
+
+export default AuthLayout;

src/components/layouts/main-layout.tsx

@@ -0,0 +1,64 @@
+import { PageContext } from "@/context/page-context";
+import { useContext } from "react";
+import { Link, Outlet } from "react-router-dom";
+import { Menu } from "react-daisyui";
+import { HardDrive, LayoutDashboard } from "lucide-react";
+
+const MainLayout = () => {
+  return (
+    <div className="flex flex-row items-stretch h-screen overflow-hidden">
+      <Sidebar />
+
+      <div className="flex-1 flex flex-col overflow-hidden">
+        <Header />
+
+        <main className="flex-1 overflow-y-auto p-4 md:p-8">
+          <div className="container max-w-5xl">
+            <Outlet />
+          </div>
+        </main>
+      </div>
+    </div>
+  );
+};
+
+const Sidebar = () => {
+  return (
+    <aside className="bg-base-100 border-r border-base-300/30 w-[220px] overflow-y-auto">
+      <div className="p-4">
+        <img
+          src="https://garagehq.deuxfleurs.fr/images/garage-logo.svg"
+          alt="logo"
+          className="w-full max-w-[100px] mx-auto"
+        />
+        <p className="text-sm font-medium text-center">WebUI</p>
+      </div>
+      <Menu className="gap-y-1">
+        <Menu.Item>
+          <Link to="/">
+            <LayoutDashboard />
+            <p>Dashboard</p>
+          </Link>
+        </Menu.Item>
+        <Menu.Item>
+          <Link to="/cluster">
+            <HardDrive />
+            <p>Cluster</p>
+          </Link>
+        </Menu.Item>
+      </Menu>
+    </aside>
+  );
+};
+
+const Header = () => {
+  const page = useContext(PageContext);
+
+  return (
+    <header className="bg-base-100 p-4 md:p-8 md:py-6 flex flex-row items-center gap-4">
+      <h1 className="text-2xl font-medium">{page?.title || "Dashboard"}</h1>
+    </header>
+  );
+};
+
+export default MainLayout;

src/components/ui/code.tsx

@@ -0,0 +1,18 @@
+import { cn } from "@/lib/utils";
+import React from "react";
+
+type Props = React.ComponentPropsWithoutRef<"code">;
+
+const Code = ({ className, ...props }: Props) => {
+  return (
+    <code
+      className={cn(
+        "border border-base-content/20 px-4 py-3 rounded-lg font-mono block",
+        className
+      )}
+      {...props}
+    />
+  );
+};
+
+export default Code;

src/components/ui/form-control.tsx

@@ -0,0 +1,58 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+import {
+  FieldValues,
+  UseFormReturn,
+  Controller,
+  ControllerRenderProps,
+  ControllerFieldState,
+  FieldPath,
+  UseFormStateReturn,
+} from "react-hook-form";
+
+type FormControlProps<
+  T extends FieldValues,
+  U extends FieldPath<T> = FieldPath<T>
+> = ComponentPropsWithoutRef<"div"> & {
+  form: UseFormReturn<T>;
+  name: FieldPath<T>;
+  title?: string;
+
+  render: (
+    field: ControllerRenderProps<T, U>,
+    fieldProps: {
+      fieldState: ControllerFieldState;
+      formState: UseFormStateReturn<T>;
+    }
+  ) => React.ReactElement;
+};
+
+const FormControl = <T extends FieldValues>({
+  form,
+  name,
+  title,
+  className,
+  render,
+}: FormControlProps<T>) => {
+  return (
+    <Controller
+      control={form.control}
+      name={name}
+      render={({ field, fieldState, formState }) => (
+        <div className={cn("form-control", className)}>
+          {title ? <label className="label label-text">{title}</label> : null}
+
+          {render(field, { fieldState, formState })}
+
+          {fieldState.error ? (
+            <label className="label label-text text-error">
+              {fieldState.error.message}
+            </label>
+          ) : null}
+        </div>
+      )}
+    />
+  );
+};
+
+export default FormControl;

src/components/ui/select.tsx

@@ -0,0 +1,47 @@
+import { cn } from "@/lib/utils";
+import { ComponentPropsWithoutRef } from "react";
+import BaseSelect from "react-select";
+import Creatable from "react-select/creatable";
+
+type Props = ComponentPropsWithoutRef<typeof BaseSelect> & {
+  creatable?: boolean;
+  onCreateOption?: (inputValue: string) => void;
+};
+
+const Select = ({ creatable, ...props }: Props) => {
+  const Comp = creatable ? Creatable : BaseSelect;
+
+  return (
+    <Comp
+      unstyled
+      classNames={{
+        control: (p) =>
+          cn(
+            "bg-base-100 px-4 rounded-btn border text-base-content border-base-content/20 h-12",
+            p.isMulti && "py-2 flex flex-row gap-2 items-center flex-wrap",
+            p.isMulti && p.hasValue ? "pt-1 px-2 h-auto" : null
+          ),
+        input: () => "text-base-content",
+        menuList: () =>
+          "bg-base-100 rounded-btn border border-base-content/20 p-0",
+        noOptionsMessage: () => "my-4",
+        option: (p) =>
+          cn(
+            "text-base-content bg-base-100 hover:bg-base-300 px-4 py-3 !cursor-pointer",
+            p.isSelected || p.isFocused ? "bg-base-200" : null
+          ),
+        singleValue: () => "text-base-content",
+        multiValue: () =>
+          "bg-base-300/80 text-base-content/80 pl-2 mt-1 mr-1 flex flex-row items-center",
+        multiValueRemove: () =>
+          "px-2 py-2 hover:bg-primary hover:text-primary-content",
+      }}
+      noOptionsMessage={() =>
+        creatable ? "Type something to add..." : undefined
+      }
+      {...props}
+    />
+  );
+};
+
+export default Select;