129 lines
3.7 KiB
TypeScript
129 lines
3.7 KiB
TypeScript
import { Section } from "./section"
|
|
import { H2, Text } from "./text"
|
|
import "hono/jsx"
|
|
import type { FC, JSX } from "hono/jsx"
|
|
import { VStack, HStack } from "./stack"
|
|
import { CodeExamples } from "./code"
|
|
import { cn } from "./cn"
|
|
|
|
export type AvatarProps = JSX.IntrinsicElements["img"] & {
|
|
size?: number
|
|
rounded?: boolean
|
|
}
|
|
|
|
export const Avatar: FC<AvatarProps> = (props) => {
|
|
const { src, size = 32, rounded, class: className, style, id, ref, alt = "", ...rest } = props
|
|
|
|
const avatarStyle: JSX.CSSProperties = {
|
|
width: `${size}px`,
|
|
height: `${size}px`,
|
|
borderRadius: rounded ? "9999px" : undefined,
|
|
...(style as JSX.CSSProperties),
|
|
}
|
|
|
|
return <img src={src} alt={alt} class={cn("Avatar", className)} style={avatarStyle} id={id} ref={ref} {...rest} />
|
|
}
|
|
|
|
export const Test = () => {
|
|
const sampleImages = [
|
|
"https://picsum.photos/seed/3/200/200",
|
|
"https://picsum.photos/seed/2/200/200",
|
|
"https://picsum.photos/seed/8/200/200",
|
|
"https://picsum.photos/seed/9/200/200",
|
|
]
|
|
|
|
return (
|
|
<Section>
|
|
{/* API Usage Examples */}
|
|
<CodeExamples
|
|
examples={[
|
|
'<Avatar src="/user.jpg" />',
|
|
'<Avatar src="/user.jpg" size={64} />',
|
|
'<Avatar src="/user.jpg" size={48} rounded />',
|
|
'<Avatar src="/user.jpg" style={{ border: "2px solid blue" }} />',
|
|
]}
|
|
/>
|
|
|
|
{/* Size variations */}
|
|
<VStack gap={4}>
|
|
<H2>Size Variations</H2>
|
|
<HStack gap={4}>
|
|
{[24, 32, 48, 64, 96].map((size) => (
|
|
<VStack key={size} h="center" gap={2}>
|
|
<Avatar src={sampleImages[0]!} size={size} alt="Sample" />
|
|
<Text>
|
|
{size}x{size}
|
|
</Text>
|
|
</VStack>
|
|
))}
|
|
</HStack>
|
|
</VStack>
|
|
|
|
{/* Rounded vs Square */}
|
|
<VStack gap={4}>
|
|
<H2>Rounded vs Square</H2>
|
|
<HStack gap={6}>
|
|
<VStack h="center" gap={2}>
|
|
<Avatar src={sampleImages[0]!} size={64} alt="Sample" />
|
|
<Text>Square</Text>
|
|
</VStack>
|
|
<VStack h="center" gap={2}>
|
|
<Avatar src={sampleImages[0]!} size={64} rounded alt="Sample" />
|
|
<Text>Rounded</Text>
|
|
</VStack>
|
|
</HStack>
|
|
</VStack>
|
|
|
|
{/* Different images */}
|
|
<VStack gap={4}>
|
|
<H2>Different Images</H2>
|
|
<HStack gap={4}>
|
|
{sampleImages.map((src, index) => (
|
|
<VStack key={src} h="center" gap={2}>
|
|
<Avatar src={src} size={64} rounded alt={`Sample ${index + 1}`} />
|
|
<Text>Image {index + 1}</Text>
|
|
</VStack>
|
|
))}
|
|
</HStack>
|
|
</VStack>
|
|
|
|
{/* Custom styles */}
|
|
<VStack gap={4}>
|
|
<H2>With Custom Styles</H2>
|
|
<HStack gap={6}>
|
|
<VStack h="center" gap={2}>
|
|
<Avatar
|
|
src={sampleImages[0]!}
|
|
size={64}
|
|
rounded
|
|
style={{ border: "4px solid #3b82f6" }}
|
|
alt="With border"
|
|
/>
|
|
<Text>With Border</Text>
|
|
</VStack>
|
|
<VStack h="center" gap={2}>
|
|
<Avatar
|
|
src={sampleImages[1]!}
|
|
size={64}
|
|
rounded
|
|
style={{ boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)" }}
|
|
alt="With shadow"
|
|
/>
|
|
<Text>With Shadow</Text>
|
|
</VStack>
|
|
<VStack h="center" gap={2}>
|
|
<Avatar
|
|
src={sampleImages[2]!}
|
|
size={64}
|
|
rounded
|
|
style={{ border: "4px solid #22c55e", boxShadow: "0 10px 15px rgba(0, 0, 0, 0.3)" }}
|
|
alt="Border + shadow"
|
|
/>
|
|
<Text>Border + Shadow</Text>
|
|
</VStack>
|
|
</HStack>
|
|
</VStack>
|
|
</Section>
|
|
)
|
|
}
|