52 lines
1.2 KiB
TypeScript
52 lines
1.2 KiB
TypeScript
import {
|
|
Card,
|
|
CardContent,
|
|
Typography,
|
|
Link,
|
|
Stack,
|
|
Box,
|
|
Divider,
|
|
} from '@mui/material';
|
|
import { Link as LinkIcon, OpenInNew } from '@mui/icons-material';
|
|
import type { LinkCollection } from '../../types/config.types';
|
|
|
|
interface LinksWidgetProps {
|
|
collection: LinkCollection;
|
|
}
|
|
|
|
function LinksWidget({ collection }: LinksWidgetProps) {
|
|
return (
|
|
<Card>
|
|
<CardContent>
|
|
<Box sx={{ display: 'flex', alignItems: 'center', mb: 1 }}>
|
|
<LinkIcon color="primary" sx={{ mr: 1 }} />
|
|
<Typography variant="h6">{collection.name}</Typography>
|
|
</Box>
|
|
<Divider sx={{ mb: 1.5 }} />
|
|
<Stack spacing={0.5}>
|
|
{collection.links.map((link, i) => (
|
|
<Link
|
|
key={i}
|
|
href={link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
underline="hover"
|
|
sx={{
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
gap: 0.5,
|
|
py: 0.5,
|
|
}}
|
|
>
|
|
{link.name}
|
|
<OpenInNew sx={{ fontSize: 14, opacity: 0.6 }} />
|
|
</Link>
|
|
))}
|
|
</Stack>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|
|
|
|
export default LinksWidget;
|