65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
import React from 'react';
|
|
import { Avatar, Box, Text, toRem } from 'folds';
|
|
import { NavItem, NavItemContent, NavLink } from '../../components/nav';
|
|
import { getBotPath } from '../../pages/pathUtils';
|
|
import type { BotPreset } from './catalog';
|
|
|
|
const MONO_FONT = '"JetBrains Mono Variable", ui-monospace, monospace';
|
|
const ROW_MIN_HEIGHT = toRem(56);
|
|
const AVATAR_BG = '#7ab6d9';
|
|
|
|
type BotCardProps = {
|
|
preset: BotPreset;
|
|
selected?: boolean;
|
|
};
|
|
|
|
export function BotCard({ preset, selected }: BotCardProps) {
|
|
const initial = preset.name.trim().charAt(0).toUpperCase() || '?';
|
|
|
|
return (
|
|
<NavItem
|
|
variant="Background"
|
|
radii="400"
|
|
aria-selected={selected}
|
|
style={{ minHeight: ROW_MIN_HEIGHT }}
|
|
>
|
|
<NavLink to={getBotPath(preset.id)}>
|
|
<NavItemContent>
|
|
<Box
|
|
as="span"
|
|
grow="Yes"
|
|
alignItems="Center"
|
|
gap="300"
|
|
style={{
|
|
minHeight: ROW_MIN_HEIGHT,
|
|
boxSizing: 'border-box',
|
|
padding: `${toRem(6)} 0`,
|
|
}}
|
|
>
|
|
<Avatar size="300" radii="400" style={{ background: AVATAR_BG, color: '#0c0c0e' }}>
|
|
<Text as="span" size="H6" style={{ color: '#0c0c0e', fontWeight: 700 }}>
|
|
{initial}
|
|
</Text>
|
|
</Avatar>
|
|
<Box
|
|
as="span"
|
|
direction="Column"
|
|
grow="Yes"
|
|
gap="100"
|
|
style={{ minWidth: 0, overflow: 'hidden' }}
|
|
>
|
|
<Box as="span" alignItems="Center" gap="200" style={{ minWidth: 0 }}>
|
|
<Text as="span" size="T300" truncate style={{ fontWeight: 600 }}>
|
|
{preset.name}
|
|
</Text>
|
|
</Box>
|
|
<Text as="span" size="T200" truncate style={{ opacity: 0.6, fontFamily: MONO_FONT }}>
|
|
{preset.mxid}
|
|
</Text>
|
|
</Box>
|
|
</Box>
|
|
</NavItemContent>
|
|
</NavLink>
|
|
</NavItem>
|
|
);
|
|
}
|