CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Update select input component

Browse Source
This commit is contained in:
adilallo
2026-02-04 13:10:14 -07:00
parent 255f16477c
commit 0e7985287f
5 changed files with 285 additions and 410 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/components-preview/page.tsx
+12 -75
View File
@@ -75,55 +75,11 @@ export default function ComponentsPreview() {
<div className="bg-[var(--color-surface-default-secondary)] rounded-[var(--radius-300,12px)] p-[var(--spacing-scale-032)] space-y-[var(--spacing-scale-024)]">
<div className="space-y-[var(--spacing-scale-016)]">
<div>
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
All Sizes
</h3>
<div className="space-y-[var(--spacing-scale-016)]">
<SelectInput
label="Small Select Input"
placeholder="Choose an option"
size="small"
value={selectValue}
onChange={(data) => setSelectValue(data.target.value)}
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
<SelectInput
label="Medium Select Input"
placeholder="Choose an option"
size="medium"
value={selectValue}
onChange={(data) => setSelectValue(data.target.value)}
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
<SelectInput
label="Large Select Input"
placeholder="Choose an option"
size="large"
value={selectValue}
onChange={(data) => setSelectValue(data.target.value)}
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
</div>
</div>
<div>
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
States
</h3>
<div className="space-y-[var(--spacing-scale-016)]">
<div className="space-y-[var(--spacing-scale-016)]">
<SelectInput
label="Default Select Input"
placeholder="Choose an option"
@@ -134,6 +90,17 @@ export default function ComponentsPreview() {
{ value: "option3", label: "Option 3" },
]}
/>
<SelectInput
label="Interactive Select Input (click = active)"
placeholder="Choose an option"
value={selectValue}
onChange={(data) => setSelectValue(data.target.value)}
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
<SelectInput
label="Disabled Select Input"
placeholder="Choose an option"
@@ -158,36 +125,6 @@ export default function ComponentsPreview() {
/>
</div>
</div>
<div>
<h3 className="font-inter text-[20px] leading-[24px] font-semibold text-[var(--color-content-default-primary)] mb-[var(--spacing-scale-012)]">
Label Variants
</h3>
<div className="space-y-[var(--spacing-scale-016)]">
<SelectInput
label="Default Label"
placeholder="Choose an option"
value=""
labelVariant="default"
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
<SelectInput
label="Horizontal Label"
placeholder="Choose an option"
value=""
labelVariant="horizontal"
options={[
{ value: "option1", label: "Option 1" },
{ value: "option2", label: "Option 2" },
{ value: "option3", label: "Option 3" },
]}
/>
</div>
</div>
</div>
</div>
</section>