mirror of
https://github.com/hanzoai/gui.git
synced 2026-10-25 02:31:41 +00:00
zeekayandHanzo Dev
954d41e603
The platform is what they were, so the menus name it once and the column under it lists what the platform actually offers. Co-authored-by: Hanzo Dev <[email protected]>
62 lines
1.9 KiB
TypeScript
62 lines
1.9 KiB
TypeScript
import { useState } from 'react'
|
|
import { ChevronRight } from '@hanzogui/lucide-icons-2'
|
|
import { Avatar, H5, Paragraph, XStack, YStack } from '@hanzo/gui'
|
|
import { Link } from '~/components/Link'
|
|
import { ThemeTintAlt } from '@hanzogui/logo'
|
|
|
|
export function AvatarCard({ title, subtitle, img, link, colorOffset, ...props }) {
|
|
const [isHovered, setHovered] = useState(false)
|
|
|
|
return (
|
|
<ThemeTintAlt offset={colorOffset}>
|
|
<Link asChild href={link}>
|
|
<YStack
|
|
bg="$background"
|
|
position="relative"
|
|
rounded="$true"
|
|
render="a"
|
|
transition="quickest"
|
|
flex={1}
|
|
width="$19"
|
|
height="$11"
|
|
y={0}
|
|
hoverStyle={{ y: -2, bg: '$backgroundHover' }}
|
|
pressStyle={{ y: 2, bg: '$color2' }}
|
|
onMouseEnter={() => setHovered(true)}
|
|
onMouseLeave={() => setHovered(false)}
|
|
{...props}
|
|
>
|
|
<YStack z={10} mb="auto" p="$true">
|
|
<XStack justify="space-between">
|
|
<YStack gap="$2.5">
|
|
<H5 size="$6" color="$color9" fontFamily="$pixel">
|
|
{title}
|
|
</H5>
|
|
<Paragraph width="$19" lineHeight="$1" color="$color8">
|
|
{subtitle}
|
|
</Paragraph>
|
|
</YStack>
|
|
|
|
<Avatar rounded="$true" size="$3" p="$3" bg="$color6">
|
|
<Avatar.Image scale={0.6} src={img} />
|
|
<Avatar.Fallback bg="$color6" borderColor="$color8" />
|
|
</Avatar>
|
|
</XStack>
|
|
</YStack>
|
|
|
|
<XStack
|
|
z={5}
|
|
mt="auto"
|
|
mb={0}
|
|
p="$true"
|
|
transition="quicker"
|
|
x={isHovered ? 5 : 0}
|
|
>
|
|
<ChevronRight size="$1" position="absolute" b="$4" r="$4" color="$color11" />
|
|
</XStack>
|
|
</YStack>
|
|
</Link>
|
|
</ThemeTintAlt>
|
|
)
|
|
}
|