mediahub-fe/app/[locale]/(protected)/forms/select/size-select.tsx

61 lines
2.2 KiB
TypeScript

"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;