adilallo
291 lines
10 KiB
JavaScript
291 lines
10 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState } from "react";
|
|
import ToggleGroup from "../components/ToggleGroup";
|
|
|
|
export default function FormsPlayground() {
|
|
const [selectedToggle, setSelectedToggle] = useState("active");
|
|
const [selectedFilter, setSelectedFilter] = useState("all");
|
|
const [toggleStates, setToggleStates] = useState({
|
|
default: false,
|
|
hover: false,
|
|
selected: true,
|
|
focus: false,
|
|
});
|
|
|
|
const handleToggleChange = (key) => (e) => {
|
|
setToggleStates((prev) => ({
|
|
...prev,
|
|
[key]: !prev[key],
|
|
}));
|
|
};
|
|
|
|
const handleToggleGroupChange = (position) => (e) => {
|
|
setSelectedToggle(position);
|
|
};
|
|
|
|
const handleFilterChange = (filter) => (e) => {
|
|
setSelectedFilter(filter);
|
|
};
|
|
|
|
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]">Toggle Group 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]">
|
|
Interactive Toggle Group
|
|
</h3>
|
|
<div className="flex">
|
|
<ToggleGroup
|
|
position="left"
|
|
state={selectedToggle === "active" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("active")}
|
|
>
|
|
Active Deals
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="middle"
|
|
state={selectedToggle === "inactive" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("inactive")}
|
|
>
|
|
Inactive Deals
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="right"
|
|
state={selectedToggle === "pending" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("pending")}
|
|
>
|
|
Pending Deals
|
|
</ToggleGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">States</h3>
|
|
<div className="flex space-x-2">
|
|
<ToggleGroup position="left" state="default" showText={true}>
|
|
Default
|
|
</ToggleGroup>
|
|
<ToggleGroup position="middle" state="hover" showText={true}>
|
|
Hover
|
|
</ToggleGroup>
|
|
<ToggleGroup position="middle" state="focus" showText={true}>
|
|
Focus
|
|
</ToggleGroup>
|
|
<ToggleGroup position="right" state="selected" showText={true}>
|
|
Selected
|
|
</ToggleGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">Positions</h3>
|
|
<div className="flex">
|
|
<ToggleGroup position="left" state="default" showText={true}>
|
|
Left
|
|
</ToggleGroup>
|
|
<ToggleGroup position="middle" state="default" showText={true}>
|
|
Middle
|
|
</ToggleGroup>
|
|
<ToggleGroup position="middle" state="default" showText={true}>
|
|
Middle
|
|
</ToggleGroup>
|
|
<ToggleGroup position="right" state="default" showText={true}>
|
|
Right
|
|
</ToggleGroup>
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<h3 className="font-space text-[14px] mb-[8px]">Without Text</h3>
|
|
<div className="flex">
|
|
<ToggleGroup position="left" state="default" showText={false}>
|
|
Icon
|
|
</ToggleGroup>
|
|
<ToggleGroup position="middle" state="selected" showText={false}>
|
|
Icon
|
|
</ToggleGroup>
|
|
<ToggleGroup position="right" state="default" showText={false}>
|
|
Icon
|
|
</ToggleGroup>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
{/* Content Visibility Examples */}
|
|
<section className="space-y-[12px]">
|
|
<h2 className="font-space text-[18px]">Content Visibility Examples</h2>
|
|
|
|
{/* Deal Management Example */}
|
|
<div className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg">
|
|
<h3 className="font-space text-[14px] mb-[8px]">Deal Management</h3>
|
|
<div className="flex">
|
|
<ToggleGroup
|
|
position="left"
|
|
state={selectedToggle === "active" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("active")}
|
|
>
|
|
Active Deals
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="middle"
|
|
state={selectedToggle === "inactive" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("inactive")}
|
|
>
|
|
Inactive Deals
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="right"
|
|
state={selectedToggle === "pending" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleToggleGroupChange("pending")}
|
|
>
|
|
Pending Deals
|
|
</ToggleGroup>
|
|
</div>
|
|
|
|
{/* Content that changes based on toggle selection */}
|
|
<div className="bg-gray-50 p-4 rounded-lg">
|
|
{selectedToggle === "active" && (
|
|
<div>
|
|
<h4 className="font-semibold text-green-700 mb-2">
|
|
Active Deals
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
|
<span>Summer Sale - 50% Off</span>
|
|
<span className="text-green-600 font-semibold">$299</span>
|
|
</li>
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
|
<span>Black Friday Special</span>
|
|
<span className="text-green-600 font-semibold">$199</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{selectedToggle === "inactive" && (
|
|
<div>
|
|
<h4 className="font-semibold text-gray-700 mb-2">
|
|
Inactive Deals
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border opacity-60">
|
|
<span>Holiday Sale - Expired</span>
|
|
<span className="text-gray-500 line-through">$399</span>
|
|
</li>
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border opacity-60">
|
|
<span>Spring Clearance - Ended</span>
|
|
<span className="text-gray-500 line-through">$149</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
|
|
{selectedToggle === "pending" && (
|
|
<div>
|
|
<h4 className="font-semibold text-yellow-700 mb-2">
|
|
Pending Deals
|
|
</h4>
|
|
<ul className="space-y-2">
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
|
<span>Cyber Monday - Coming Soon</span>
|
|
<span className="text-yellow-600 font-semibold">$99</span>
|
|
</li>
|
|
<li className="flex justify-between items-center p-2 bg-white rounded border">
|
|
<span>New Year Sale - Pending</span>
|
|
<span className="text-yellow-600 font-semibold">$79</span>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Filter Example */}
|
|
<div className="max-w-[520px] space-y-[16px] bg-white p-6 rounded-lg border border-gray-200 shadow-lg">
|
|
<h3 className="font-space text-[14px] mb-[8px]">Content Filter</h3>
|
|
<div className="flex">
|
|
<ToggleGroup
|
|
position="left"
|
|
state={selectedFilter === "all" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleFilterChange("all")}
|
|
>
|
|
All
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="middle"
|
|
state={selectedFilter === "featured" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleFilterChange("featured")}
|
|
>
|
|
Featured
|
|
</ToggleGroup>
|
|
<ToggleGroup
|
|
position="right"
|
|
state={selectedFilter === "recent" ? "selected" : "default"}
|
|
showText={true}
|
|
onChange={handleFilterChange("recent")}
|
|
>
|
|
Recent
|
|
</ToggleGroup>
|
|
</div>
|
|
|
|
<div className="grid grid-cols-1 gap-4">
|
|
<div
|
|
className={`p-4 rounded-lg border ${
|
|
selectedFilter === "all" || selectedFilter === "featured"
|
|
? "block"
|
|
: "hidden"
|
|
}`}
|
|
>
|
|
<h4 className="font-semibold">Featured Article</h4>
|
|
<p className="text-gray-600 text-sm">
|
|
This is a featured article that shows when "All" or "Featured"
|
|
is selected.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`p-4 rounded-lg border ${
|
|
selectedFilter === "all" || selectedFilter === "recent"
|
|
? "block"
|
|
: "hidden"
|
|
}`}
|
|
>
|
|
<h4 className="font-semibold">Recent Post</h4>
|
|
<p className="text-gray-600 text-sm">
|
|
This is a recent post that shows when "All" or "Recent" is
|
|
selected.
|
|
</p>
|
|
</div>
|
|
<div
|
|
className={`p-4 rounded-lg border ${
|
|
selectedFilter === "all" ? "block" : "hidden"
|
|
}`}
|
|
>
|
|
<h4 className="font-semibold">General Content</h4>
|
|
<p className="text-gray-600 text-sm">
|
|
This content only shows when "All" is selected.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
);
|
|
}
|