96 lines
2.8 KiB
TypeScript
96 lines
2.8 KiB
TypeScript
import React from 'react';
|
|
import { Info, FileText, Maximize2, Type, Calendar, LucideIcon } from 'lucide-react';
|
|
import { Box } from './primitives/Box';
|
|
import { Text } from './Text';
|
|
import { Icon } from './Icon';
|
|
|
|
export interface MediaMetaItem {
|
|
label: string;
|
|
value: string | number;
|
|
icon?: LucideIcon;
|
|
}
|
|
|
|
export interface MediaMetaPanelProps {
|
|
title?: string;
|
|
items: MediaMetaItem[];
|
|
className?: string;
|
|
}
|
|
|
|
export function MediaMetaPanel({
|
|
title = 'Asset Details',
|
|
items,
|
|
className = '',
|
|
}: MediaMetaPanelProps) {
|
|
return (
|
|
<Box
|
|
bg="bg-charcoal-outline/10"
|
|
border
|
|
borderColor="border-charcoal-outline/50"
|
|
rounded="lg"
|
|
p={4}
|
|
className={className}
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2} mb={4}>
|
|
<Icon icon={Info} size={4} color="text-blue-500" />
|
|
<Text weight="semibold" size="sm" uppercase letterSpacing="wider">
|
|
{title}
|
|
</Text>
|
|
</Box>
|
|
|
|
<Box display="flex" flexDirection="col" gap={3}>
|
|
{items.map((item, index) => (
|
|
<Box
|
|
key={`${item.label}-${index}`}
|
|
display="flex"
|
|
alignItems="center"
|
|
justifyContent="between"
|
|
pb={index === items.length - 1 ? 0 : 3}
|
|
borderBottom={index === items.length - 1 ? false : true}
|
|
borderColor="border-charcoal-outline/20"
|
|
>
|
|
<Box display="flex" alignItems="center" gap={2}>
|
|
{item.icon && <Icon icon={item.icon} size={3.5} color="text-gray-500" />}
|
|
<Text size="xs" color="text-gray-500" weight="medium">
|
|
{item.label}
|
|
</Text>
|
|
</Box>
|
|
<Text size="xs" weight="semibold" font="mono">
|
|
{item.value}
|
|
</Text>
|
|
</Box>
|
|
))}
|
|
</Box>
|
|
</Box>
|
|
);
|
|
}
|
|
|
|
// Helper to map common media metadata
|
|
export const mapMediaMetadata = (metadata: {
|
|
filename?: string;
|
|
size?: number;
|
|
dimensions?: string;
|
|
contentType?: string;
|
|
createdAt?: string | Date;
|
|
}): MediaMetaItem[] => {
|
|
const items: MediaMetaItem[] = [];
|
|
|
|
if (metadata.filename) {
|
|
items.push({ label: 'Filename', value: metadata.filename, icon: FileText });
|
|
}
|
|
if (metadata.size) {
|
|
items.push({ label: 'Size', value: `${Math.round(metadata.size / 1024)} KB`, icon: Maximize2 });
|
|
}
|
|
if (metadata.dimensions) {
|
|
items.push({ label: 'Dimensions', value: metadata.dimensions, icon: Maximize2 });
|
|
}
|
|
if (metadata.contentType) {
|
|
items.push({ label: 'Type', value: metadata.contentType, icon: Type });
|
|
}
|
|
if (metadata.createdAt) {
|
|
const date = typeof metadata.createdAt === 'string' ? new Date(metadata.createdAt) : metadata.createdAt;
|
|
items.push({ label: 'Created', value: date.toLocaleDateString(), icon: Calendar });
|
|
}
|
|
|
|
return items;
|
|
};
|