Browse Source

📦 Added StarRating component

🌟 Implement a reusable StarRating component
📊 Set default props for point and reviewCount
🎨 Styled StarRating component for better UI
🔧 Added missing export statement
main
John Doe 1 year ago
parent
commit
33c008f2ab
  1. 31
      src/components/StartRating.tsx

31
src/components/StartRating.tsx

@ -0,0 +1,31 @@
import { StarIcon } from "@heroicons/react/24/solid";
import React, { FC } from "react";
export interface StartRatingProps {
className?: string;
point?: number;
reviewCount?: number;
}
const StartRating: FC<StartRatingProps> = ({
className = "",
point = 4.5,
reviewCount = 112,
}) => {
return (
<div
className={`nc-StartRating flex items-center space-x-1 text-sm ${className}`}
data-nc-id="StartRating"
>
<div className="pb-[2px]">
<StarIcon className="w-[18px] h-[18px] text-orange-500" />
</div>
<span className="font-medium ">{point}</span>
<span className="text-neutral-500 dark:text-neutral-400">
({reviewCount})
</span>
</div>
);
};
export default StartRating;
Loading…
Cancel
Save