45 lines
997 B
TypeScript
45 lines
997 B
TypeScript
import React from 'react';
|
|
import { Box } from './Box';
|
|
import { Image } from './Image';
|
|
import { Tag } from 'lucide-react';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface CategoryIconProps {
|
|
categoryId?: string;
|
|
src?: string;
|
|
alt: string;
|
|
size?: number;
|
|
className?: string;
|
|
}
|
|
|
|
export function CategoryIcon({
|
|
categoryId,
|
|
src,
|
|
alt,
|
|
size = 24,
|
|
className = '',
|
|
}: CategoryIconProps) {
|
|
const iconSrc = src || (categoryId ? `/media/categories/${categoryId}/icon` : undefined);
|
|
|
|
return (
|
|
<Box
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="center"
|
|
className={className}
|
|
style={{ width: size, height: size, flexShrink: 0 }}
|
|
>
|
|
{iconSrc ? (
|
|
<Image
|
|
src={iconSrc}
|
|
alt={alt}
|
|
className="w-full h-full object-contain"
|
|
fallbackSrc="/default-category-icon.png"
|
|
/>
|
|
) : (
|
|
<Icon icon={Tag} size={size > 20 ? 4 : 3} color="text-gray-500" />
|
|
)}
|
|
</Box>
|
|
);
|
|
}
|