- {entry.data.tags.map((tag) => (
+
+ {rating &&
+
+
}
+ {entry.data.tags.map((tag) => {
+ if (tag.startsWith('rating-')) return null;
+ return (
{tag}
- ))}
+ )})}
)
}
diff --git a/src/components/ui/rating.tsx b/src/components/ui/rating.tsx
new file mode 100644
index 0000000..e342107
--- /dev/null
+++ b/src/components/ui/rating.tsx
@@ -0,0 +1,107 @@
+import React from "react"
+import { Star } from "lucide-react"
+
+import { cn } from "@/lib/utils"
+
+const ratingVariants = {
+ default: {
+ star: "text-primary",
+ emptyStar: "text-muted-foreground",
+ },
+ destructive: {
+ star: "text-red-500",
+ emptyStar: "text-red-200",
+ },
+ yellow: {
+ star: "text-yellow-500",
+ emptyStar: "text-yellow-200",
+ },
+}
+
+interface RatingsProps extends React.HTMLAttributes
{
+ rating: number
+ totalStars?: number
+ size?: number
+ fill?: boolean
+ Icon?: React.ReactElement
+ variant?: keyof typeof ratingVariants
+}
+
+const Ratings = ({ ...props }: RatingsProps) => {
+ const {
+ rating,
+ totalStars = 5,
+ size = 20,
+ fill = true,
+ Icon = ,
+ variant = "default",
+ } = props
+
+ const fullStars = Math.floor(rating)
+ const partialStar =
+ rating % 1 > 0 ? (
+
+ ) : null
+
+ return (
+
+ {[...Array(fullStars)].map((_, i) =>
+ React.cloneElement(Icon, {
+ key: i,
+ size,
+ className: cn(
+ fill ? "fill-current" : "fill-transparent",
+ ratingVariants[variant].star
+ ),
+ })
+ )}
+ {partialStar}
+ {[...Array(totalStars - fullStars - (partialStar ? 1 : 0))].map((_, i) =>
+ React.cloneElement(Icon, {
+ key: i + fullStars + 1,
+ size,
+ className: cn(ratingVariants[variant].emptyStar),
+ })
+ )}
+
+ )
+}
+
+interface PartialStarProps {
+ fillPercentage: number
+ size: number
+ className?: string
+ Icon: React.ReactElement
+}
+const PartialStar = ({ ...props }: PartialStarProps) => {
+ const { fillPercentage, size, className, Icon } = props
+
+ return (
+
+ {React.cloneElement(Icon, {
+ size,
+ className: cn("fill-transparent", className),
+ })}
+
+ {React.cloneElement(Icon, {
+ size,
+ className: cn("fill-current", className),
+ })}
+
+
+
@@ -67,39 +74,54 @@ const allPosts = await getRecentPosts(2)