27 lines
941 B
TypeScript
27 lines
941 B
TypeScript
import type { HTMLAttributes, ReactNode } from 'react';
|
|
import { cn } from '../utils/cn.ts';
|
|
|
|
interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
|
|
selected?: boolean;
|
|
highlighted?: boolean;
|
|
children: ReactNode;
|
|
}
|
|
|
|
export function ListItem({ selected, highlighted, className, children, ...props }: ListItemProps) {
|
|
return (
|
|
<div
|
|
className={cn(
|
|
'flex cursor-pointer items-center gap-1.5 rounded px-1.5 py-1 text-[10px] transition-colors duration-100 select-none',
|
|
'hover:bg-wing-card',
|
|
selected && 'bg-[rgba(14,234,255,0.16)] border-[rgba(14,234,255,0.55)]',
|
|
highlighted && !selected && 'bg-[rgba(245,158,11,0.16)] border border-[rgba(245,158,11,0.4)]',
|
|
selected && highlighted && 'bg-gradient-to-r from-[rgba(14,234,255,0.16)] to-[rgba(245,158,11,0.16)] border-[rgba(14,234,255,0.7)]',
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{children}
|
|
</div>
|
|
);
|
|
}
|