Init

src/App.tsx

@@ -0,0 +1,98 @@
+import { PrimaryButton } from "./components/button/PrimaryButton";
+import { SecondaryButton } from "./components/button/SecondaryButton";
+import { Checkbox } from "./components/checkbox/Checkbox";
+import { Input } from "./components/input/Input";
+import { Switch } from "./components/switch/Switch";
+
+function App() {
+  return (
+    <div className="flex  py-[100px] w-full h-full">
+      <Switch
+        className=" fixed top-0 left-0 z-full"
+        variant="theme"
+        color="secondary"
+        onChange={(state: boolean) => {
+          document.documentElement.setAttribute(
+            "data-theme",
+            state ? "dark" : "light"
+          );
+        }}
+      />
+      <div className="">
+        <Input
+          id="first_name"
+          label="Фамилия"
+          variant="bordered"
+          //placeholder="test"
+          radius="sm"
+          className="m-2"
+          required
+          onChange={(state: string) => {
+            console.log(state);
+          }}
+        />
+        <Input
+          variant="flat"
+          id="given_name"
+          label="Имя"
+          //placeholder="test"
+          radius="sm"
+          className="m-2"
+          required
+          onChange={(state: string) => {
+            console.log(state);
+          }}
+        />
+        <Input
+          variant="faded"
+          type="email"
+          label="Почта"
+          radius="sm"
+          className="m-2"
+          required
+          onChange={(state: string) => {
+            console.log(state);
+          }}
+        />
+        
+        <Input
+          labelType="in-fixed"
+          type="password"
+          label="Пароль"
+          radius="sm"
+          className="m-2"
+          required
+          onChange={(state: string) => {
+            console.log(state);
+          }}
+        />
+        <Checkbox onChange={() => { }} label="test" color="default" defaultState={true}/>
+        <Checkbox onChange={() => { }} label="test" color="primary" defaultState={true}/>
+        <Checkbox onChange={() => { }} label="test" color="secondary" defaultState={true}/>
+        <Checkbox onChange={() => { }} label="test" color="success" defaultState={true}/>
+        <Checkbox onChange={() => { }} label="test" color="warning" defaultState={true}/>
+        <Checkbox onChange={() => { }} label="test" color="danger" defaultState={true}/>
+        <Switch onChange={() => { }} color="default" defaultState={true}/>
+        <Switch onChange={() => { }} color="primary" defaultState={true}/>
+        <Switch onChange={() => { }} color="secondary" defaultState={true}/>
+        <Switch onChange={() => { }} color="success" defaultState={true}/>
+        <Switch onChange={() => { }} color="warning" defaultState={true}/>
+        <Switch onChange={() => { }} color="danger" defaultState={true}/>
+
+
+        <div className="grid grid-rows-3 grid-cols-2 grid-flow-col">
+
+          <PrimaryButton onClick={() => { }} text="Button" className="m-5" />
+          <PrimaryButton onClick={() => { }} text="Button" className="m-5" />
+          <PrimaryButton onClick={() => { }} text="Button" disabled className="m-5" />
+          <SecondaryButton onClick={() => { }} text="Button" className="m-5" />
+          <SecondaryButton onClick={() => { }} text="Button" className="m-5" />
+          <SecondaryButton onClick={() => { }} text="Button" disabled className="m-5" />
+        </div>
+      </div>
+      <div className="w-full"></div>
+    </div>
+  );
+}
+
+export default App;