refactor: add react-rating star component

app/layout.tsx

@@ -1,4 +1,5 @@
 import './globals.css';
+import '@smastrom/react-rating/style.css';
 
 import type { Metadata, Viewport } from 'next';
 

package.json

@@ -25,6 +25,7 @@
     "@coinbase/onchainkit": "^0.6.1",
     "@next/bundle-analyzer": "^14.1.0",
     "@nextui-org/react": "^2.2.9",
+    "@smastrom/react-rating": "^1.5.0",
     "@tanstack/react-query": "^5.24.2",
     "@tanstack/react-virtual": "^3.0.2",
     "class-variance-authority": "^0.7.0",

src/orgs/components/org-reviews/aggregate-ratings-card.tsx

@@ -1,5 +1,8 @@
+import { Rating, RoundedStar } from '@smastrom/react-rating';
+
 import { DetailsPanelCardWrapper } from '~/shared/components/details-panel/card-wrapper';
 import { Heading } from '~/shared/components/heading';
+import { Text } from '~/shared/components/text';
 
 import { ORG_RATING_LABELS } from '~/orgs/core/constants';
 import { OrgDetails } from '~/orgs/core/schemas';
@@ -21,17 +24,6 @@ export const AggregateRatingsCard = ({
     ([, rating]) => rating !== null,
   ) as [string, number][];
 
-  // const ratings = Object.entries({
-  //   benefits: null,
-  //   careerGrowth: 4.5,
-  //   diversityInclusion: 3.9,
-  //   management: 3.4,
-  //   product: 3.3,
-  //   compensation: 4.9,
-  //   onboarding: 4.6,
-  //   workLifeBalance: null,
-  // }).filter(([, rating]) => rating !== null) as [string, number][];
-
   return (
     <DetailsPanelCardWrapper>
       <Heading text={HEADING_TEXT} />
@@ -44,16 +36,21 @@ export const AggregateRatingsCard = ({
             key={label}
             className="flex shrink-0 flex-wrap items-center justify-start gap-2"
           >
-            <p>{rating.toFixed(1)}</p>
-            {/* <Rating
-              count={1}
-              fractions={5}
-              value={(rating ?? 0) / 5}
-              color="gold"
-            /> */}
-            <p className="shrink-0">
-              {ORG_RATING_LABELS[label as keyof typeof ORG_RATING_LABELS]}
-            </p>
+            <Text
+              className="text-base font-bold text-white"
+              text={rating.toFixed(1)}
+            />
+            <Rating
+              readOnly
+              value={rating}
+              style={{ maxWidth: 120 }}
+              itemStyles={RATING_ITEM_STYLES}
+            />
+
+            <Text
+              className="shrink-0 text-base text-white"
+              text={ORG_RATING_LABELS[label as keyof typeof ORG_RATING_LABELS]}
+            />
           </div>
         ))}
       </div>
@@ -64,3 +61,9 @@ export const AggregateRatingsCard = ({
 };
 
 const HEADING_TEXT = 'Aggregate Ratings';
+
+const RATING_ITEM_STYLES = {
+  itemShapes: RoundedStar,
+  activeFillColor: '#ffb700',
+  inactiveFillColor: '#3f3f3f',
+};