59 lines
1.5 KiB
TypeScript
59 lines
1.5 KiB
TypeScript
import { IconStar, IconStarFilled } from "@components/icons.tsx";
|
|
import { Signal, useSignal } from "@preact/signals";
|
|
import { useState } from "preact/hooks";
|
|
|
|
export const SmallRating = (
|
|
{ max = 5, rating }: { max?: number; rating: number },
|
|
) => {
|
|
return (
|
|
<div
|
|
class="flex gap-1 rounded"
|
|
style={{ filter: "drop-shadow(0px 3px 3px black)" }}
|
|
>
|
|
{Array.from({ length: max }).map((_, i) => {
|
|
return (
|
|
<span>
|
|
{(i + 1) <= rating
|
|
? <IconStarFilled class="w-3 h-3" />
|
|
: <IconStar class="w-3 h-3" />}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export const Rating = (
|
|
{ max, rating = useSignal(0) }: {
|
|
max?: number;
|
|
rating: Signal<number | undefined>;
|
|
},
|
|
) => {
|
|
const [hover, setHover] = useState(0);
|
|
|
|
const ratingValue = rating.value || 0;
|
|
|
|
return (
|
|
<div
|
|
class="flex items-center gap-2 px-5 rounded-2xl bg-gray-200 z-10 h-full"
|
|
style={{ color: "var(--foreground)", background: "var(--background)" }}
|
|
>
|
|
{Array.from({ length: max || 5 }).map((_, i) => {
|
|
return (
|
|
<span
|
|
class={`cursor-pointer opacity-${
|
|
(i + 1) <= ratingValue ? 100 : (i + 1) <= hover ? 20 : 100
|
|
}`}
|
|
onMouseOver={() => setHover(i + 1)}
|
|
onClick={() => (rating.value = i + 1)}
|
|
>
|
|
{(i + 1) <= ratingValue || (i + 1) <= hover
|
|
? <IconStarFilled class="w-4 h-4" />
|
|
: <IconStar class="w-4 h-4" />}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
);
|
|
};
|