fix: remove use-screenshot

feat: displat file type
This commit is contained in:
Wentao Lyu 2023-04-07 13:21:20 +08:00
parent 34c3663308
commit ca720efde8
4 changed files with 81 additions and 58 deletions

View file

@ -4,6 +4,7 @@ import { Listbox } from '@headlessui/react';
import { cn } from '~/utils/';
function Dropdown({ value, onChange, options, className, containerClassName }) {
const currentOption = options.find(element => element === value || element?.value === value) ?? value;
return (
<div className={cn('flex items-center justify-center gap-2', containerClassName)}>
<div className="relative w-full">
@ -19,7 +20,7 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
>
<span className="inline-flex w-full truncate">
<span className="flex h-6 items-center gap-1 truncate text-sm text-black dark:text-white">
{value}
{currentOption?.display ?? value}
</span>
</span>
<span className="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2">
@ -43,19 +44,19 @@ function Dropdown({ value, onChange, options, className, containerClassName }) {
{options.map((item, i) => (
<Listbox.Option
key={i}
value={item}
value={item?.value ?? item}
className="group relative flex h-[42px] cursor-pointer select-none items-center overflow-hidden border-b border-black/10 pl-3 pr-9 text-gray-900 last:border-0 hover:bg-[#ECECF1] dark:border-white/20 dark:text-white dark:hover:bg-gray-700"
>
<span className="flex items-center gap-1.5 truncate">
<span
className={cn(
'flex h-6 items-center gap-1 text-gray-800 dark:text-gray-100',
value === item ? 'font-semibold' : ''
value === (item?.value ?? item) ? 'font-semibold' : ''
)}
>
{item}
{item?.display ?? item}
</span>
{value === item && (
{value === (item?.value ?? item) && (
<span className="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-800 dark:text-gray-100">
<CheckMark />
</span>