rating

1---
2import type { HTMLAttributes } from "astro/types"
3 
4import { cn } from "@/lib/utils"
5import { Icon } from "@/components/ui/icon"
6 
7type Props = HTMLAttributes<"div"> & {
8  value?: number
9}
10 
11const { value = 5, class: className, ...props } = Astro.props
12---
13 
14<div class={cn("flex items-center gap-1 text-base", className)} {...props}>
15  {
16    Array.from({ length: 5 }).map((_, index) => {
17      const fillPercentage =
18        index < Math.floor(value)
19          ? 100
20          : index === Math.floor(value)
21            ? (value % 1) * 100
22            : 0
23 
24      return (
25        <span class="text-muted-foreground/25 relative inline-flex size-[1em]">
26          <Icon name="star" class="size-[1em] fill-current" />
27          {fillPercentage > 0 && (
28            <span
29              class="text-primary absolute inset-0 overflow-hidden"
30              style={{ width: `${fillPercentage}%` }}
31            >
32              <Icon name="star" class="size-[1em] fill-current" />
33            </span>
34          )}
35        </span>
36      )
37    })
38  }
39</div>