AmirReza Jamali
c2a14953d0
This commit introduces a new "Contacts" section to the marketing page, which is now the fifth step in the page's flow. Additionally, the Checkbox component has been enhanced with a smooth transition effect on state change. This provides better visual feedback and a more polished user experience.
127 lines
3.9 KiB
TypeScript
127 lines
3.9 KiB
TypeScript
import type { Metadata } from "next";
|
|
|
|
import DatePickerOne from "@/components/FormElements/DatePicker/DatePickerOne";
|
|
import DatePickerTwo from "@/components/FormElements/DatePicker/DatePickerTwo";
|
|
import { Checkbox } from "@/components/FormElements/checkbox";
|
|
import { RadioInput } from "@/components/FormElements/radio";
|
|
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>
|
|
</>
|
|
);
|
|
}
|