Initial commit for new panel

src/app/forms/form-elements/page.tsx

@@ -0,0 +1,133 @@
+import type { Metadata } from "next";
+
+import { GlobeIcon } from "@/assets/icons";
+
+import DatePickerOne from "@/components/FormElements/DatePicker/DatePickerOne";
+import DatePickerTwo from "@/components/FormElements/DatePicker/DatePickerTwo";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
+import MultiSelect from "@/components/FormElements/MultiSelect";
+import { Checkbox } from "@/components/FormElements/checkbox";
+import { RadioInput } from "@/components/FormElements/radio";
+import { Select } from "@/components/FormElements/select";
+import { Switch } from "@/components/FormElements/switch";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+
+export const metadata: Metadata = {
+  title: "Form Elements",
+};
+
+export default function FormElementsPage() {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-9 sm:grid-cols-2">
+        <div className="flex flex-col gap-9">
+          <ShowcaseSection title="Input Fields" className="space-y-5.5 !p-6.5">
+            {/* <InputGroup
+              label="Default input"
+              placeholder="Default input text"
+              type="text"
+              name="default"
+            /> */}
+            <div>hello</div>
+            {/* <InputGroup
+              label="Active input"
+              placeholder="Active input text"
+              active
+              type="text"
+            />
+
+            <InputGroup
+              label="Disabled input"
+              placeholder="Disabled input text"
+              type="text"
+              disabled
+            /> */}
+          </ShowcaseSection>
+
+          <ShowcaseSection
+            title="Toggle switch input"
+            className="space-y-5.5 !p-6.5"
+          >
+            <Switch />
+            <Switch backgroundSize="sm" />
+            <Switch withIcon />
+            <Switch background="dark" />
+          </ShowcaseSection>
+
+          <ShowcaseSection title="Time and date" className="space-y-5.5 !p-6.5">
+            <DatePickerOne />
+            <DatePickerTwo />
+          </ShowcaseSection>
+
+          <ShowcaseSection title="File upload" className="space-y-5.5 !p-6.5">
+            <div>hello</div>
+            {/* <InputGroup
+              type="file"
+              fileStyleVariant="style1"
+              label="Attach file"
+              placeholder="Attach file"
+              name="file2"
+            />
+
+            <InputGroup
+              name="file"
+              type="file"
+              fileStyleVariant="style2"
+              label="Attach file"
+              placeholder="Attach file"
+            /> */}
+          </ShowcaseSection>
+        </div>
+
+        <div className="flex flex-col gap-9">
+          <ShowcaseSection title="Textarea Fields" className="space-y-6 !p-6.5">
+            <div>hello</div>
+            {/* <TextAreaGroup
+              label="Default textarea"
+              placeholder="Default textarea"
+            />
+
+            <TextAreaGroup
+              label="Active textarea"
+              placeholder="Active textarea"
+              active
+            />
+
+            <TextAreaGroup
+              label="Disabled textarea"
+              placeholder="Disabled textarea"
+              disabled
+            /> */}
+          </ShowcaseSection>
+
+          <ShowcaseSection title="Select input" className="space-y-5.5 !p-6.5">
+            {/* <Select
+              label="Select Country"
+              items={[
+                { label: "United States", value: "USA" },
+                { label: "United Kingdom", value: "UK" },
+                { label: "Canada", value: "Canada" },
+              ]}
+              defaultValue="USA"
+              prefixIcon={<GlobeIcon />}
+            /> */}
+            <div>hello</div>
+            {/* <MultiSelect id="multiSelect" /> */}
+          </ShowcaseSection>
+
+          <ShowcaseSection
+            title="Checkbox and radio"
+            className="space-y-5.5 !p-6.5"
+          >
+            <Checkbox label="Checkbox Text" />
+            <Checkbox label="Checkbox Text" withIcon="check" />
+            <Checkbox label="Checkbox Text" withIcon="x" />
+            <RadioInput label="Checkbox Text" />
+            <RadioInput label="Checkbox Text" variant="circle" />
+          </ShowcaseSection>
+        </div>
+      </div>
+    </>
+  );
+}

src/app/forms/form-layout/_components/contact-form.tsx

@@ -0,0 +1,60 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
+import { Select } from "@/components/FormElements/select";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+
+export function ContactForm() {
+  return (
+    <ShowcaseSection title="Contact Form" className="!p-6.5">
+      <form action="#">
+        <div className="mb-4.5 flex flex-col gap-4.5 xl:flex-row">
+          <InputGroup
+            label="First name"
+            type="text"
+            placeholder="Enter your first name"
+            className="w-full xl:w-1/2"
+          />
+
+          <InputGroup
+            label="Last name"
+            type="text"
+            placeholder="Enter your last name"
+            className="w-full xl:w-1/2"
+          />
+        </div>
+
+        <InputGroup
+          label="Email"
+          type="email"
+          placeholder="Enter your email address"
+          className="mb-4.5"
+          required
+        />
+
+        <InputGroup
+          label="Subject"
+          type="text"
+          placeholder="Enter your subject"
+          className="mb-4.5"
+        />
+
+        <Select
+          label="Subject"
+          placeholder="Select your subject"
+          className="mb-4.5"
+          items={[
+            { label: "United States", value: "USA" },
+            { label: "United Kingdom", value: "UK" },
+            { label: "Canada", value: "Canada" },
+          ]}
+        />
+
+        <TextAreaGroup label="Message" placeholder="Type your message" />
+
+        <button className="mt-6 flex w-full justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+          Send Message
+        </button>
+      </form>
+    </ShowcaseSection>
+  );
+}

src/app/forms/form-layout/_components/sign-in-form.tsx

@@ -0,0 +1,37 @@
+import { Checkbox } from "@/components/FormElements/checkbox";
+import InputGroup from "@/components/FormElements/InputGroup";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+import Link from "next/link";
+
+export function SignInForm() {
+  return (
+    <ShowcaseSection title="Sign In Form" className="!p-6.5">
+      <form action="#">
+        <InputGroup
+          label="Email"
+          type="email"
+          placeholder="Enter your email address"
+          className="mb-4.5"
+        />
+
+        <InputGroup
+          label="Password"
+          type="password"
+          placeholder="Enter your password"
+        />
+
+        <div className="mb-5.5 mt-5 flex items-center justify-between">
+          <Checkbox label="Remember me" minimal withBg withIcon="check" />
+
+          <Link href="#" className="text-body-sm text-primary hover:underline">
+            Forgot password?
+          </Link>
+        </div>
+
+        <button className="flex w-full justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+          Sign In
+        </button>
+      </form>
+    </ShowcaseSection>
+  );
+}

src/app/forms/form-layout/_components/sign-up-form.tsx

@@ -0,0 +1,42 @@
+import InputGroup from "@/components/FormElements/InputGroup";
+import { ShowcaseSection } from "@/components/Layouts/showcase-section";
+
+export function SignUpForm() {
+  return (
+    <ShowcaseSection title="Sign Up Form" className="!p-6.5">
+      <form action="#">
+        <InputGroup
+          label="Name"
+          type="text"
+          placeholder="Enter full name"
+          className="mb-4.5"
+        />
+
+        <InputGroup
+          label="Email"
+          type="email"
+          placeholder="Enter email address"
+          className="mb-4.5"
+        />
+
+        <InputGroup
+          label="Password"
+          type="password"
+          placeholder="Enter password"
+          className="mb-4.5"
+        />
+
+        <InputGroup
+          label="Re-type Password"
+          type="password"
+          placeholder="Re-type password"
+          className="mb-5.5"
+        />
+
+        <button className="flex w-full justify-center rounded-lg bg-primary p-[13px] font-medium text-white hover:bg-opacity-90">
+          Sign Up
+        </button>
+      </form>
+    </ShowcaseSection>
+  );
+}

src/app/forms/form-layout/page.tsx

@@ -0,0 +1,26 @@
+import type { Metadata } from "next";
+import { ContactForm } from "./_components/contact-form";
+import { SignInForm } from "./_components/sign-in-form";
+import { SignUpForm } from "./_components/sign-up-form";
+
+export const metadata: Metadata = {
+  title: "Form Layout",
+};
+
+export default function Page() {
+  return (
+    <>
+      <div className="grid grid-cols-1 gap-9 sm:grid-cols-2">
+        <div className="flex flex-col gap-9">
+          <ContactForm />
+        </div>
+
+        <div className="flex flex-col gap-9">
+          <SignInForm />
+
+          <SignUpForm />
+        </div>
+      </div>
+    </>
+  );
+}