FilesViewer.tsx43 lines · main

1	import { useState } from 'react'
2	import { cn, Dialog, DialogContent } from 'ui'
3
4	export const FilesViewer = ({ files }: { files: string[] }) => {
5	const [selected, setSelected] = useState(files[0])
6	const [showDialog, setShowDialog] = useState(false)
7
8	return (
9	<>
10	<div className="flex flex-col gap-y-4">
11	<button onClick={() => setShowDialog(true)}>
12	<img
13	alt={selected}
14	src={selected}
15	className="rounded-md border object-cover aspect-video"
16	/>
17	</button>
18
19	{files.length > 1 && (
20	<div className="grid grid-cols-10 gap-x-2">
21	{files.map((x) => (
22	<button key={x} onClick={() => setSelected(x)}>
23	<img
24	alt={x}
25	src={x}
26	className={cn(
27	'col-span-1 bg-surface-100 rounded-md object-cover aspect-square border transition',
28	selected === x ? 'border-button-hover' : 'border-secondary'
29	)}
30	/>
31	</button>
32	))}
33	</div>
34	)}
35	</div>
36	<Dialog open={showDialog} onOpenChange={setShowDialog}>
37	<DialogContent size="xxlarge">
38	<img alt={selected} src={selected} className="rounded-md border" />
39	</DialogContent>
40	</Dialog>
41	</>
42	)
43	}