343 lines
12 KiB
TypeScript
343 lines
12 KiB
TypeScript
|
export const basicSelect=`
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectGroup,
|
||
|
|
SelectItem,
|
||
|
|
SelectLabel,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select"
|
||
|
|
|
||
|
|
const BasicSelect = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-3.5">
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Select a fruit" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Fruits</SelectLabel>
|
||
|
|
<SelectItem value="apple">Apple</SelectItem>
|
||
|
|
<SelectItem value="banana">Banana</SelectItem>
|
||
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
||
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select disabled>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Disabled Select" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Fruits</SelectLabel>
|
||
|
|
<SelectItem value="apple">Apple</SelectItem>
|
||
|
|
<SelectItem value="banana">Banana</SelectItem>
|
||
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
||
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Disabled Item" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Fruits</SelectLabel>
|
||
|
|
<SelectItem value="apple">Apple</SelectItem>
|
||
|
|
<SelectItem value="banana">Banana</SelectItem>
|
||
|
|
<SelectItem value="blueberry" disabled>Blueberry</SelectItem>
|
||
|
|
<SelectItem value="grapes" disabled>Grapes</SelectItem>
|
||
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default BasicSelect;`
|
||
|
|
|
||
|
|
export const controlledSelect=`"use client"
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectGroup,
|
||
|
|
SelectItem,
|
||
|
|
SelectLabel,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select"
|
||
|
|
import { useState } from "react";
|
||
|
|
|
||
|
|
const ControlledSelect = () => {
|
||
|
|
const [value, setValue] = useState("");
|
||
|
|
const handleValueChange = (value: string) => {
|
||
|
|
setValue(value)
|
||
|
|
}
|
||
|
|
return (
|
||
|
|
<div className="space-y-3.5">
|
||
|
|
<Select onValueChange={handleValueChange}>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Select a fruit" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Fruits</SelectLabel>
|
||
|
|
<SelectItem value="apple">Apple</SelectItem>
|
||
|
|
<SelectItem value="banana">Banana</SelectItem>
|
||
|
|
<SelectItem value="blueberry">Blueberry</SelectItem>
|
||
|
|
<SelectItem value="grapes">Grapes</SelectItem>
|
||
|
|
<SelectItem value="pineapple">Pineapple</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<p className="text-sm text-default-600">Selected: <strong>{value}</strong> </p>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ControlledSelect;`
|
||
|
|
|
||
|
|
export const colorSelect=`import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
|
||
|
|
const ColorSelect = () => {
|
||
|
|
return (
|
||
|
|
<div className="space-y-3">
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger color="primary">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger color="secondary">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select >
|
||
|
|
<SelectTrigger color="info">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select >
|
||
|
|
<SelectTrigger color="warning">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select >
|
||
|
|
<SelectTrigger color="success">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select >
|
||
|
|
<SelectTrigger color="destructive">
|
||
|
|
<SelectValue placeholder="Select a subject" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ColorSelect;`
|
||
|
|
|
||
|
|
export const scrollableSelect=`
|
||
|
|
import {
|
||
|
|
Select,
|
||
|
|
SelectContent,
|
||
|
|
SelectGroup,
|
||
|
|
SelectItem,
|
||
|
|
SelectLabel,
|
||
|
|
SelectTrigger,
|
||
|
|
SelectValue,
|
||
|
|
} from "@/components/ui/select"
|
||
|
|
|
||
|
|
const SelectScrollable = () => {
|
||
|
|
return (
|
||
|
|
<div className="flex justify-center py-10">
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger className="w-[280px]">
|
||
|
|
<SelectValue placeholder="Select a timezone" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>North America</SelectLabel>
|
||
|
|
<SelectItem value="est">Eastern Standard Time (EST)</SelectItem>
|
||
|
|
<SelectItem value="cst">Central Standard Time (CST)</SelectItem>
|
||
|
|
<SelectItem value="mst">Mountain Standard Time (MST)</SelectItem>
|
||
|
|
<SelectItem value="pst">Pacific Standard Time (PST)</SelectItem>
|
||
|
|
<SelectItem value="akst">Alaska Standard Time (AKST)</SelectItem>
|
||
|
|
<SelectItem value="hst">Hawaii Standard Time (HST)</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Europe & Africa</SelectLabel>
|
||
|
|
<SelectItem value="gmt">Greenwich Mean Time (GMT)</SelectItem>
|
||
|
|
<SelectItem value="cet">Central European Time (CET)</SelectItem>
|
||
|
|
<SelectItem value="eet">Eastern European Time (EET)</SelectItem>
|
||
|
|
<SelectItem value="west">
|
||
|
|
Western European Summer Time (WEST)
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="cat">Central Africa Time (CAT)</SelectItem>
|
||
|
|
<SelectItem value="eat">East Africa Time (EAT)</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Asia</SelectLabel>
|
||
|
|
<SelectItem value="msk">Moscow Time (MSK)</SelectItem>
|
||
|
|
<SelectItem value="ist">India Standard Time (IST)</SelectItem>
|
||
|
|
<SelectItem value="cst_china">China Standard Time (CST)</SelectItem>
|
||
|
|
<SelectItem value="jst">Japan Standard Time (JST)</SelectItem>
|
||
|
|
<SelectItem value="kst">Korea Standard Time (KST)</SelectItem>
|
||
|
|
<SelectItem value="ist_indonesia">
|
||
|
|
Indonesia Central Standard Time (WITA)
|
||
|
|
</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>Australia & Pacific</SelectLabel>
|
||
|
|
<SelectItem value="awst">
|
||
|
|
Australian Western Standard Time (AWST)
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="acst">
|
||
|
|
Australian Central Standard Time (ACST)
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="aest">
|
||
|
|
Australian Eastern Standard Time (AEST)
|
||
|
|
</SelectItem>
|
||
|
|
<SelectItem value="nzst">New Zealand Standard Time (NZST)</SelectItem>
|
||
|
|
<SelectItem value="fjt">Fiji Time (FJT)</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
<SelectGroup>
|
||
|
|
<SelectLabel>South America</SelectLabel>
|
||
|
|
<SelectItem value="art">Argentina Time (ART)</SelectItem>
|
||
|
|
<SelectItem value="bot">Bolivia Time (BOT)</SelectItem>
|
||
|
|
<SelectItem value="brt">Brasilia Time (BRT)</SelectItem>
|
||
|
|
<SelectItem value="clt">Chile Standard Time (CLT)</SelectItem>
|
||
|
|
</SelectGroup>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default SelectScrollable;`
|
||
|
|
|
||
|
|
export const sizeSelect=`"use client"
|
||
|
|
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
|
||
|
|
const SizesSelect = () => {
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="space-y-4">
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger size="sm">
|
||
|
|
<SelectValue placeholder="Small Select" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger>
|
||
|
|
<SelectValue placeholder="Default Select" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger size="md">
|
||
|
|
<SelectValue placeholder="Medium Select" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
<Select>
|
||
|
|
<SelectTrigger size="lg">
|
||
|
|
<SelectValue placeholder="Large Select" />
|
||
|
|
</SelectTrigger>
|
||
|
|
<SelectContent>
|
||
|
|
<SelectItem value="english">English</SelectItem>
|
||
|
|
<SelectItem value="mathmatics">Mathmatics</SelectItem>
|
||
|
|
<SelectItem value="physics">Physics</SelectItem>
|
||
|
|
<SelectItem value="chemistry">Chemistry</SelectItem>
|
||
|
|
<SelectItem value="biology">Biology</SelectItem>
|
||
|
|
</SelectContent>
|
||
|
|
</Select>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default SizesSelect;`
|