List components #31
@ -4,6 +4,7 @@ export interface ListItemProps extends HTMLAttributes<HTMLDivElement> {
|
||||
title: string;
|
||||
subtitle?: string;
|
||||
selected?: boolean;
|
||||
focused?: boolean;
|
||||
}
|
||||
|
||||
const iconStyles: CSSProperties = {
|
||||
@ -34,16 +35,23 @@ const defaultStateClasses = 'bg-base-canvas text-base-ink-strong hover:bg-sky-10
|
||||
|
||||
const selectedStateClasses = 'bg-base-canvas text-base-ink-placeholder';
|
||||
|
||||
const focusedStateClasses = 'bg-sky-100 text-primary';
|
||||
|
||||
export default function ListItem({
|
||||
title,
|
||||
subtitle,
|
||||
selected = false,
|
||||
focused = false,
|
||||
className = '',
|
||||
...props
|
||||
}: ListItemProps) {
|
||||
const stateClasses = selected ? selectedStateClasses : defaultStateClasses;
|
||||
const getStateClasses = () => {
|
||||
if (selected) return selectedStateClasses;
|
||||
if (focused) return focusedStateClasses;
|
||||
return defaultStateClasses;
|
||||
};
|
||||
|
||||
const classes = [baseClasses, stateClasses, className].filter(Boolean).join(' ');
|
||||
const classes = [baseClasses, getStateClasses(), className].filter(Boolean).join(' ');
|
||||
|
||||
return (
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user