adilallo
91 lines
2.8 KiB
JavaScript
91 lines
2.8 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import Switch from "../components/Switch";
|
|
|
|
export default function FormsPlayground() {
|
|
const [switchStates, setSwitchStates] = useState({
|
|
switch1: false,
|
|
switch2: true,
|
|
switch3: false,
|
|
switch4: true,
|
|
});
|
|
|
|
const handleSwitchChange = (switchName) => {
|
|
setSwitchStates((prev) => ({
|
|
...prev,
|
|
[switchName]: !prev[switchName],
|
|
}));
|
|
};
|
|
|
|
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]">Switch Examples</h2>
|
|
<div
|
|
className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg"
|
|
//style={{ backgroundColor: "white" }}
|
|
>
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">Switch States</h3>
|
|
<div className="space-y-4">
|
|
<Switch
|
|
checked={switchStates.switch1}
|
|
onChange={() => handleSwitchChange("switch1")}
|
|
label="Switch label"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch2}
|
|
onChange={() => handleSwitchChange("switch2")}
|
|
label="Switch label"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch3}
|
|
onChange={() => handleSwitchChange("switch3")}
|
|
state="focus"
|
|
label="Switch label"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch4}
|
|
onChange={() => handleSwitchChange("switch4")}
|
|
state="focus"
|
|
label="Switch label"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">
|
|
Interactive Example
|
|
</h3>
|
|
<div className="space-y-4">
|
|
<Switch
|
|
checked={switchStates.switch1}
|
|
onChange={() => handleSwitchChange("switch1")}
|
|
label="Enable notifications"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch2}
|
|
onChange={() => handleSwitchChange("switch2")}
|
|
label="Auto-save documents"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch3}
|
|
onChange={() => handleSwitchChange("switch3")}
|
|
label="Dark mode"
|
|
/>
|
|
<Switch
|
|
checked={switchStates.switch4}
|
|
onChange={() => handleSwitchChange("switch4")}
|
|
label="Email updates"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|