Star Rating

import { StarRating } from "@/components/optics/star-rating";<div className="flex items-center justify-center flex-wrap gap-8">  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      Default    </p>    <StarRating />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      With Value    </p>    <StarRating defaultValue={3} />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      Small    </p>    <StarRating size="sm" />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      Medium    </p>    <StarRating size="md" />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      Large    </p>    <StarRating size="lg" />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      10 Stars    </p>    <StarRating totalStars={10} />  </div>  <div className="flex flex-col items-center gap-2">    <p className="text-sm text-muted-foreground">      Disabled    </p>    <StarRating      defaultValue={2}      disabled    />  </div></div>