106 lines
2.4 KiB
Text
106 lines
2.4 KiB
Text
---
|
|
import { Avatar, AvatarImage } from "@/components/ui/avatar"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Icon } from "@/components/ui/icon"
|
|
import { Image } from "@/components/ui/image"
|
|
import {
|
|
Item,
|
|
ItemContent,
|
|
ItemDescription,
|
|
ItemMedia,
|
|
} from "@/components/ui/item"
|
|
import { List, ListItem } from "@/components/ui/list"
|
|
import { Rating } from "@/components/ui/rating"
|
|
import {
|
|
Section,
|
|
SectionActions,
|
|
SectionContent,
|
|
SectionMedia,
|
|
SectionProse,
|
|
SectionSplit,
|
|
} from "@/components/ui/section"
|
|
|
|
interface Props {
|
|
class?: string
|
|
id?: string
|
|
list?: string[]
|
|
links?: {
|
|
icon?: string
|
|
text?: string
|
|
href?: string
|
|
target?: string
|
|
}[]
|
|
item?: {
|
|
images?: {
|
|
src: string
|
|
alt: string
|
|
}[]
|
|
rating?: number
|
|
description?: string
|
|
}
|
|
image?: {
|
|
src: string
|
|
alt: string
|
|
}
|
|
}
|
|
|
|
const { class: className, id, list, links, item, image } = Astro.props
|
|
---
|
|
|
|
<Section class={className} id={id}>
|
|
<SectionSplit class="@5xl:items-center">
|
|
<SectionContent>
|
|
<SectionProse class="text-balance" size="lg">
|
|
<slot />
|
|
</SectionProse>
|
|
<List>
|
|
{
|
|
list?.map((item) => (
|
|
<ListItem>
|
|
<Icon name="check" />
|
|
{item}
|
|
</ListItem>
|
|
))
|
|
}
|
|
</List>
|
|
<SectionActions>
|
|
{
|
|
links?.map(({ icon, text, ...link }, i) => (
|
|
<Button
|
|
variant={i === 0 ? "default" : "secondary"}
|
|
size="lg"
|
|
{...link}
|
|
>
|
|
{icon && <Icon name={icon} />}
|
|
{text}
|
|
</Button>
|
|
))
|
|
}
|
|
</SectionActions>
|
|
<Item class="p-0">
|
|
<ItemMedia class="-space-x-5">
|
|
{
|
|
item?.images?.map((image) => (
|
|
<Avatar class="ring-background size-11 ring">
|
|
<AvatarImage {...image} />
|
|
</Avatar>
|
|
))
|
|
}
|
|
</ItemMedia>
|
|
<ItemContent class="mt-1">
|
|
<Rating rating={item?.rating} />
|
|
<ItemDescription>
|
|
{item?.description}
|
|
</ItemDescription>
|
|
</ItemContent>
|
|
</Item>
|
|
</SectionContent>
|
|
<SectionMedia>
|
|
<Image
|
|
sizes="(min-width: 1536px) 768px, (min-width: 1024px) 50vw, 100vw"
|
|
priority
|
|
{...image}
|
|
/>
|
|
</SectionMedia>
|
|
</SectionSplit>
|
|
</Section>
|