53 lines
1.3 KiB
TypeScript
53 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import { ReactNode } from 'react';
|
|
import { Box } from './Box';
|
|
import { Card } from './Card';
|
|
import { Text } from './Text';
|
|
|
|
export interface ListItemProps {
|
|
children: ReactNode;
|
|
onClick?: () => void;
|
|
}
|
|
|
|
export const ListItem = ({ children, onClick }: ListItemProps) => {
|
|
return (
|
|
<Card
|
|
variant="dark"
|
|
onClick={onClick}
|
|
style={{ cursor: onClick ? 'pointer' : 'default' }}
|
|
>
|
|
<Box display="flex" alignItems="center" justifyContent="between" gap={4}>
|
|
{children}
|
|
</Box>
|
|
</Card>
|
|
);
|
|
};
|
|
|
|
export interface ListItemInfoProps {
|
|
title: string;
|
|
description?: string;
|
|
meta?: ReactNode;
|
|
}
|
|
|
|
export const ListItemInfo = ({ title, description, meta }: ListItemInfoProps) => (
|
|
<Box flex={1} minWidth="0">
|
|
<Text weight="bold" variant="high" block truncate>{title}</Text>
|
|
{description && (
|
|
<Text size="xs" variant="low" block marginTop={1} lineClamp={2}>
|
|
{description}
|
|
</Text>
|
|
)}
|
|
{meta && <Box marginTop={2}>{meta}</Box>}
|
|
</Box>
|
|
);
|
|
|
|
export interface ListItemActionsProps {
|
|
children: ReactNode;
|
|
}
|
|
|
|
export const ListItemActions = ({ children }: ListItemActionsProps) => (
|
|
<Box display="flex" alignItems="center" gap={2} flexShrink={0}>
|
|
{children}
|
|
</Box>
|
|
);
|