adilallo
100 lines
3.4 KiB
JavaScript
100 lines
3.4 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Checkbox from "../components/Checkbox";
|
|
import RadioButton from "../components/RadioButton";
|
|
import RadioGroup from "../components/RadioGroup";
|
|
|
|
export default function FormsPlayground() {
|
|
const [standardChecked, setStandardChecked] = useState(false);
|
|
const [inverseChecked, setInverseChecked] = useState(true);
|
|
const [radioValue, setRadioValue] = useState("option1");
|
|
const [standardRadioValue, setStandardRadioValue] = useState("option1");
|
|
const [inverseRadioValue, setInverseRadioValue] = useState("option2");
|
|
|
|
return (
|
|
<div className="p-[24px] space-y-[24px]">
|
|
<h1 className="font-bricolage text-[24px]">Forms Playground</h1>
|
|
|
|
<section className="space-y-[12px]">
|
|
<h2 className="font-space text-[18px]">Checkbox Examples</h2>
|
|
<div className="flex flex-col gap-[12px] max-w-[520px]">
|
|
<Checkbox
|
|
label="Standard (controlled)"
|
|
checked={standardChecked}
|
|
mode="standard"
|
|
state="default"
|
|
onChange={({ checked }) => setStandardChecked(checked)}
|
|
/>
|
|
<Checkbox
|
|
label="Inverse (controlled)"
|
|
checked={inverseChecked}
|
|
mode="inverse"
|
|
state="default"
|
|
onChange={({ checked }) => setInverseChecked(checked)}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-[12px]">
|
|
<h2 className="font-space text-[18px]">Radio Button Examples</h2>
|
|
<div className="flex flex-col gap-[12px] max-w-[520px]">
|
|
<RadioButton
|
|
label="Standard (controlled)"
|
|
checked={radioValue === "option1"}
|
|
mode="standard"
|
|
state="default"
|
|
value="option1"
|
|
onChange={({ checked }) => checked && setRadioValue("option1")}
|
|
/>
|
|
<RadioButton
|
|
label="Inverse (controlled)"
|
|
checked={radioValue === "option2"}
|
|
mode="inverse"
|
|
state="default"
|
|
value="option2"
|
|
onChange={({ checked }) => checked && setRadioValue("option2")}
|
|
/>
|
|
</div>
|
|
</section>
|
|
|
|
<section className="space-y-[12px]">
|
|
<h2 className="font-space text-[18px]">Radio Group</h2>
|
|
<div className="max-w-[520px] space-y-[16px]">
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">Standard Mode</h3>
|
|
<RadioGroup
|
|
name="standard-radio"
|
|
value={standardRadioValue}
|
|
mode="standard"
|
|
state="default"
|
|
onChange={({ value }) => setStandardRadioValue(value)}
|
|
options={[
|
|
{ value: "option1", label: "Option 1" },
|
|
{ value: "option2", label: "Option 2" },
|
|
{ value: "option3", label: "Option 3" },
|
|
]}
|
|
/>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">Inverse Mode</h3>
|
|
<RadioGroup
|
|
name="inverse-radio"
|
|
value={inverseRadioValue}
|
|
mode="inverse"
|
|
state="default"
|
|
onChange={({ value }) => setInverseRadioValue(value)}
|
|
options={[
|
|
{ value: "option1", label: "Option 1" },
|
|
{ value: "option2", label: "Option 2" },
|
|
{ value: "option3", label: "Option 3" },
|
|
]}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|