MultipleOptionsView.tsx
3.03 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
import React from 'react';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from "../ui/table";
import { Input } from "../ui/input";
import { Button } from "../ui/button";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "../ui/select";
import { Plus } from "lucide-react";
export function MultipleOptionsView() {
const options = [
{
id: 1,
name: 'Prepped By',
contents: 'A. Smith; B. Doe; C. Borne',
lastEdited: '2025.12.03.11:45',
},
{
id: 2,
name: 'Checked By',
contents: 'D. Manager; E. Supervisor',
lastEdited: '2025.12.04.09:30',
},
{
id: 3,
name: 'Allergens',
contents: 'Peanuts; Dairy; Gluten; Soy',
lastEdited: '2025.12.05.14:15',
},
];
return (
<div className="space-y-6">
{/* Controls: Search, Location, New Multiple Options — 单行 + 圆角 + 细边框 + 统一高度 40px，黄色按钮无边框、靠右 */}
<div className="flex flex-wrap items-center gap-3" style={{ height: 40 }}>
<Input
placeholder="Search"
className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0 leading-normal"
style={{ height: 40 }}
/>
<Select defaultValue="all">
<SelectTrigger
className="bg-white border border-black rounded-lg w-[180px] shrink-0 py-0"
style={{ height: 40 }}
>
<SelectValue placeholder="Location" />
</SelectTrigger>
<SelectContent>
<SelectItem value="all">All Locations</SelectItem>
<SelectItem value="loc-a">Location A</SelectItem>
<SelectItem value="loc-b">Location B</SelectItem>
</SelectContent>
</Select>
<Button className="bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg px-6 border-0 shrink-0 ml-auto py-0 min-h-0" style={{ height: 40 }}>
New Multiple Options <Plus className="ml-1 h-4 w-4" />
</Button>
</div>
{/* Table */}
<div className="rounded-md border bg-white shadow-sm">
<Table>
<TableHeader>
<TableRow className="bg-gray-50 hover:bg-gray-50">
<TableHead className="font-bold text-gray-900 w-[250px]">Multiple Option Name</TableHead>
<TableHead className="font-bold text-gray-900 w-[200px]">Contents</TableHead>
<TableHead className="font-bold text-gray-900 pl-[120px]">Last Edited</TableHead>
</TableRow>
</TableHeader>
<TableBody>
{options.map((item) => (
<TableRow key={item.id} className="hover:bg-gray-50">
<TableCell className="font-medium">{item.name}</TableCell>
<TableCell className="text-gray-600">{item.contents}</TableCell>
<TableCell className="text-gray-500 tabular-nums pl-[120px]">{item.lastEdited}</TableCell>
</TableRow>
))}
</TableBody>
</Table>
</div>
</div>
);
}