From 6b2201527b8c22a153b8fb6997b8f3b93eeea8c6 Mon Sep 17 00:00:00 2001 From: Hussein Martinez Date: Wed, 27 Nov 2024 17:21:06 +0700 Subject: [PATCH 1/4] chore: extended tailwind borderRadius theme --- tailwind.config.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/tailwind.config.ts b/tailwind.config.ts index ab6c6664..f5fca90d 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -33,6 +33,7 @@ export default withTV({ sans: ["DM Sans", "sans-serif"], }, borderRadius: { + "3.5": "14px", lg: "var(--radius)", md: "calc(var(--radius) - 2px)", sm: "calc(var(--radius) - 4px)", From 1bf8ceaf821f1013cdffb6a96e0da6ef14548881 Mon Sep 17 00:00:00 2001 From: Hussein Martinez Date: Wed, 27 Nov 2024 17:25:05 +0700 Subject: [PATCH 2/4] chore: implemented ReviewsCounterLabel --- .../ReviewsCounterLabel.stories.tsx | 64 ++++++++++++++ .../ReviewsCounterLabel.tsx | 39 +++++++++ .../components/ReviewIcon.stories.tsx | 85 +++++++++++++++++++ .../components/ReviewIcon.tsx | 58 +++++++++++++ .../components/ReviewIconGroup.stories.tsx | 47 ++++++++++ .../components/ReviewIconGroup.tsx | 54 ++++++++++++ .../components/ReviewsCounterLabel/index.ts | 1 + 7 files changed, 348 insertions(+) create mode 100644 src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.stories.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.stories.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.tsx create mode 100644 src/features/checker/components/ReviewsCounterLabel/index.ts diff --git a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx new file mode 100644 index 00000000..e074eb8e --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx @@ -0,0 +1,64 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { ReviewsCounterLabel } from "./ReviewsCounterLabel"; + +const meta: Meta = { + title: "features/Checker/Components/ReviewsCounterLabel", + component: ReviewsCounterLabel, + argTypes: { + posReviews: { + control: { + type: "number", + min: 0, + }, + }, + negReviews: { + control: { + type: "number", + min: 0, + }, + }, + className: { + control: "text", + description: "Additional CSS classes to apply to the component.", + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + posReviews: 0, + negReviews: 0, + }, +}; + +export const Pending: Story = { + args: { + posReviews: 0, + negReviews: 0, + }, +}; + +export const WithoutMaxReviews: Story = { + args: { + posReviews: 1, + negReviews: 2, + }, +}; + +export const WithMaxReviews: Story = { + args: { + posReviews: 3, + negReviews: 2, + }, +}; + +export const TooManyReviews: Story = { + args: { + posReviews: 300, + negReviews: 200, + }, +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx new file mode 100644 index 00000000..8e7410d4 --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx @@ -0,0 +1,39 @@ +import React from "react"; + +import { tv } from "tailwind-variants"; + +import { cn } from "@/lib/utils"; + +import { ReviewIconGroup } from "./components/ReviewIconGroup"; + +const variants = tv({ + slots: { + container: "flex items-center gap-2", + text: "truncate text-[16px]/[24px]", + }, +}); + +interface ReviewsCounterLabelProps { + posReviews?: number; + negReviews?: number; + className?: string; +} + +export const ReviewsCounterLabel: React.FC = ({ + posReviews = 0, + negReviews = 0, + className, +}) => { + const { text, container } = variants(); + + const totalReviews = Math.max(0, posReviews) + Math.max(0, negReviews); + + return ( +
+ + + {totalReviews ? `${totalReviews} Review${totalReviews > 1 ? "s" : ""}` : "Needs review"} + +
+ ); +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.stories.tsx b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.stories.tsx new file mode 100644 index 00000000..a7b02cc5 --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.stories.tsx @@ -0,0 +1,85 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { ReviewIcon } from "./ReviewIcon"; + +const meta: Meta = { + title: "Primitives/ReviewIcon", + component: ReviewIcon, + argTypes: { + withCounter: { + control: { + type: "boolean", + }, + defaultValue: false, + }, + nReviews: { + control: { + type: "number", + min: 0, + }, + defaultValue: undefined, + }, + status: { + control: { + type: "select", + options: ["approved", "rejected", "pending"], + }, + defaultValue: "pending", + }, + className: { + control: { + type: "text", + }, + defaultValue: "", + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Playground: Story = { + args: { + nReviews: 1, + status: "approved", + }, +}; + +export const Approved: Story = { + args: { + status: "approved", + }, +}; + +export const Rejected: Story = { + args: { + status: "rejected", + }, +}; + +export const Pending: Story = { + args: { + status: "pending", + }, +}; + +export const WithCounter: Story = { + args: { + status: "approved", + withCounter: true, + }, + + argTypes: { + status: { + control: { + type: "select", + options: ["approved", "rejected", "pending"], + defaultValue: "pending", + }, + }, + withCounter: { + control: false, + }, + }, +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx new file mode 100644 index 00000000..dae58423 --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIcon.tsx @@ -0,0 +1,58 @@ +import { tv } from "tailwind-variants"; + +import { cn } from "@/lib/utils"; +import { Icon, IconType } from "@/primitives/Icon"; + +const iconType = { + approved: IconType.CHECK, + rejected: IconType.X, + pending: IconType.EXCLAMATION_CIRCLE, +}; + +const iconVariants = tv({ + slots: { + icon: "size-5 shrink-0", + container: "flex items-center justify-center gap-1 border border-grey-100 bg-white", + }, + variants: { + status: { + approved: { icon: "fill-green-600" }, + rejected: { icon: "fill-red-200" }, + pending: { icon: "fill-yellow-200" }, + }, + withCounter: { + true: { container: "flex h-7 w-14 items-center gap-1 rounded-3.5 px-1.5 py-1" }, + false: { container: "size-7 rounded-full p-1" }, + }, + }, + defaultVariants: { + withCounter: false, + }, +}); + +export const ReviewIcon = ({ + withCounter, + nReviews = 0, + status, + className, + style, +}: { + withCounter?: boolean; + nReviews?: number; + status: "approved" | "rejected" | "pending"; + className?: string; + style?: React.CSSProperties; +}) => { + const { icon, container } = iconVariants({ status, withCounter }); + + if (status === "pending") { + return ; + } + + return ( +
+ + {withCounter && {nReviews ? nReviews : "?"}} +
+ ); +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.stories.tsx b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.stories.tsx new file mode 100644 index 00000000..a5c5dc65 --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.stories.tsx @@ -0,0 +1,47 @@ +import type { Meta, StoryObj } from "@storybook/react"; + +import { ReviewIconGroup } from "./ReviewIconGroup"; + +const meta: Meta = { + title: "Primitives/ReviewIconGroup", + component: ReviewIconGroup, + argTypes: { + positiveReviews: { + control: { + type: "number", + min: 0, + }, + }, + negativeReviews: { + control: { + type: "number", + min: 0, + }, + }, + }, +}; + +export default meta; + +type Story = StoryObj; + +export const Playground: Story = { + args: { + positiveReviews: 1, + negativeReviews: 1, + }, +}; + +export const Default: Story = { + args: { + positiveReviews: 1, + negativeReviews: 1, + }, +}; + +export const MoreThanMaxIcons: Story = { + args: { + positiveReviews: 3, + negativeReviews: 1, + }, +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.tsx b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.tsx new file mode 100644 index 00000000..33133083 --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/components/ReviewIconGroup.tsx @@ -0,0 +1,54 @@ +import { ReviewIcon } from "./ReviewIcon"; + +const MAX_N_ICONS = 3; +const ICON_WIDTH_WITH_COUNTER = 56; +const ICON_WIDTH_WITHOUT_COUNTER = 28; +const OVERLAP_WITH_COUNTER = 40; +const OVERLAP_WITHOUT_COUNTER = 20; + +export const ReviewIconGroup = ({ + positiveReviews = 0, + negativeReviews = 0, +}: { + positiveReviews: number; + negativeReviews: number; +}) => { + const totalReviews = Math.max(0, positiveReviews) + Math.max(0, negativeReviews); + const isMaxReviews = totalReviews > MAX_N_ICONS; + const iconWidth = isMaxReviews ? ICON_WIDTH_WITH_COUNTER : ICON_WIDTH_WITHOUT_COUNTER; + const overlap = isMaxReviews ? OVERLAP_WITH_COUNTER : OVERLAP_WITHOUT_COUNTER; + const overlapToDiscount = iconWidth - overlap; + + if (totalReviews === 0) { + return ; // pending review icon + } + + let containerWidth; + if (isMaxReviews) { + containerWidth = + positiveReviews > 0 && negativeReviews > 0 ? iconWidth * 2 - overlapToDiscount : iconWidth; + } else { + containerWidth = totalReviews * iconWidth - (totalReviews - 1) * overlapToDiscount; + } + const reviewBooleans = isMaxReviews + ? [...(positiveReviews > 0 ? [true] : []), ...(negativeReviews > 0 ? [false] : [])] + : [...Array(positiveReviews).fill(true), ...Array(negativeReviews).fill(false)]; + + return ( +
+ {reviewBooleans.map((review, index) => ( + + ))} +
+ ); +}; diff --git a/src/features/checker/components/ReviewsCounterLabel/index.ts b/src/features/checker/components/ReviewsCounterLabel/index.ts new file mode 100644 index 00000000..98e76dba --- /dev/null +++ b/src/features/checker/components/ReviewsCounterLabel/index.ts @@ -0,0 +1 @@ +export * from "./ReviewsCounterLabel"; From b06cbc96dd636fa51e7c8c4a80df9a7683d558b3 Mon Sep 17 00:00:00 2001 From: Hussein Martinez Date: Wed, 27 Nov 2024 17:36:36 +0700 Subject: [PATCH 3/4] chore: removed reviews variant in IconLabel --- .../IconLabel/IconLabel.stories.tsx | 39 +------------------ src/components/IconLabel/IconLabel.tsx | 18 +-------- src/components/IconLabel/types.ts | 7 ---- src/components/IconLabel/utils.tsx | 34 +--------------- src/components/IconLabel/variants.ts | 10 +---- .../ProjectEvaluationList.tsx | 3 +- .../ProjectReviewList/ProjectReviewList.tsx | 3 +- 7 files changed, 8 insertions(+), 106 deletions(-) diff --git a/src/components/IconLabel/IconLabel.stories.tsx b/src/components/IconLabel/IconLabel.stories.tsx index fded8eb8..9f608be9 100644 --- a/src/components/IconLabel/IconLabel.stories.tsx +++ b/src/components/IconLabel/IconLabel.stories.tsx @@ -13,15 +13,7 @@ const meta: Meta = { argTypes: { type: { control: "select", - options: [ - "default", - "ai-evaluation", - "date", - "dateWithPrefix", - "reviews", - "address", - "social", - ], + options: ["default", "ai-evaluation", "date", "dateWithPrefix", "address", "social"], }, platform: { control: "select", @@ -58,20 +50,6 @@ const meta: Meta = { }, if: { arg: "type", eq: "period" }, }, - posReviews: { - control: { - type: "number", - min: 0, - }, - if: { arg: "type", eq: "reviews" }, - }, - negReviews: { - control: { - type: "number", - min: 0, - }, - if: { arg: "type", eq: "reviews" }, - }, address: { control: "text", if: { arg: "type", eq: "address" }, @@ -114,8 +92,6 @@ export const Playground: Story = { percent: 77, // Default for evaluation date: new Date(), // Default for date prefix: "Applied on: ", // Default for dateWithPrefix - posReviews: 3, // Default for reviews - negReviews: 3, // Default for reviews address: "0xE307051C410e970b861CC55CBFD5Acc7BB477750", // Default for address link: "https://github.com/user", // Default for social isVerified: false, // Default for social @@ -261,16 +237,3 @@ export const SocialTwitter: Story = { expect(linkText).toBeInTheDocument(); }, }; -// Reviews Label Story -export const Reviews: Story = { - args: { - type: "reviews", - posReviews: 3, - negReviews: 2, - }, - play: async ({ canvasElement }) => { - const canvas = within(canvasElement); - const reviewsText = await canvas.findByText("5 Reviews"); - expect(reviewsText).toBeInTheDocument(); - }, -}; diff --git a/src/components/IconLabel/IconLabel.tsx b/src/components/IconLabel/IconLabel.tsx index a09304c1..30f2ce65 100644 --- a/src/components/IconLabel/IconLabel.tsx +++ b/src/components/IconLabel/IconLabel.tsx @@ -7,13 +7,7 @@ import { getAddressLabel } from "@/lib/utils"; import { IconType } from "@/primitives/Icon"; import { IconLabelProps } from "./types"; -import { - getEvaluation, - renderReviewIcons, - IconLabelContainer, - getFormattedLink, - RenderIcon, -} from "./utils"; +import { getEvaluation, IconLabelContainer, getFormattedLink, RenderIcon } from "./utils"; import { variants } from "./variants"; export const IconLabel: React.FC = (props) => { @@ -88,16 +82,6 @@ export const IconLabel: React.FC = (props) => { )}`} )) - .with({ type: "reviews" }, ({ posReviews = 0, negReviews = 0, className }) => { - const totalReviews = Math.max(0, posReviews) + Math.max(0, negReviews); - - return ( - -
{renderReviewIcons(posReviews, negReviews)}
- {`${totalReviews} Reviews`} - - ); - }) .with({ type: "address" }, ({ address, ens, className }) => { const label = getAddressLabel(ens, address); diff --git a/src/components/IconLabel/types.ts b/src/components/IconLabel/types.ts index 0da39a0e..75cae51a 100644 --- a/src/components/IconLabel/types.ts +++ b/src/components/IconLabel/types.ts @@ -33,12 +33,6 @@ interface DateWithPrefixProps { className?: string; } -interface ReviewsProps { - type: "reviews"; - posReviews?: number; - negReviews?: number; - className?: string; -} interface AddressProps { type: "address"; address?: string; @@ -68,7 +62,6 @@ export type IconLabelProps = | DateProps | PeriodProps | RoundPeriodProps - | ReviewsProps | AddressProps | SocialProps | DateWithPrefixProps diff --git a/src/components/IconLabel/utils.tsx b/src/components/IconLabel/utils.tsx index 28539669..f4544cdf 100644 --- a/src/components/IconLabel/utils.tsx +++ b/src/components/IconLabel/utils.tsx @@ -5,7 +5,7 @@ import { Icon, IconType } from "@/primitives/Icon"; import { variants } from "./variants"; -const { container, icon } = variants(); +const { container } = variants(); export function getEvaluation(percent: number) { percent = Math.min(Math.max(percent, 0), 100); @@ -18,38 +18,6 @@ export function getEvaluation(percent: number) { } } -export function renderReviewIcons(posReviews: number, negReviews: number) { - const totalReviews = Math.max(0, posReviews) + Math.max(0, negReviews); - const icons = []; - - for (let i = 0; i < totalReviews; i++) { - const isPositive = i < posReviews; - const isFirst = i === 0; - const classes = getReviewIconClasses(isFirst, isPositive); - - icons.push( - , - ); - } - - return icons; -} - -function getReviewIconClasses(isFirst: boolean, isPositive: boolean): string { - const baseClasses = icon({ type: "reviews" }); - let variantClasses = ""; - - if (isPositive) { - variantClasses = isFirst - ? icon({ reviewType: "posFirst" }) - : icon({ reviewType: "posNotFirst" }); - } else { - variantClasses = icon({ reviewType: "neg" }); - } - - return `${baseClasses} ${variantClasses}`; -} - export const IconLabelContainer = ({ type, iconVariant, diff --git a/src/components/IconLabel/variants.ts b/src/components/IconLabel/variants.ts index c872980d..46f4265e 100644 --- a/src/components/IconLabel/variants.ts +++ b/src/components/IconLabel/variants.ts @@ -38,18 +38,10 @@ export const variants = tv({ text: "text-[14px]/[17px] text-grey-700", icon: "size-4 fill-grey-700", }, - reviews: { - container: "gap-2", - icon: "size-7 rounded-full border border-grey-100 bg-white", - }, + verifiedBadge: { icon: "h-5 w-[28px]", }, }, - reviewType: { - posFirst: { icon: "fill-green-600" }, - posNotFirst: { icon: "-ml-2 fill-green-600" }, - neg: { icon: "-ml-2 fill-red-200" }, - }, }, }); diff --git a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx index f8cd82dc..23a756fd 100644 --- a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx +++ b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx @@ -7,6 +7,7 @@ import { getReviewsCount } from "~checker/utils/getReviewsCount"; import { EvaluationAction, ProjectEvaluationAction } from "../ProjectEvaluationAction"; import { ProjectStatus } from "../ProjectEvaluationAction"; import { ProjectReview } from "../ProjectReviewList"; +import { ReviewsCounterLabel } from "../ReviewsCounterLabel"; export interface ProjectEvaluationListProps { evaluationStatus?: ProjectStatus; @@ -50,7 +51,7 @@ export const ProjectEvaluationList = ({ width: "1fr", render: (item) => { const { nApproved, nRejected } = getReviewsCount(item.reviews); - return ; + return ; }, }, { diff --git a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx index bfa8bd3f..46111bfb 100644 --- a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx +++ b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx @@ -5,6 +5,7 @@ import { ListGrid, ListGridColumn } from "@/primitives/ListGrid"; import { getReviewsCount } from "~checker/utils/getReviewsCount"; +import { ReviewsCounterLabel } from "../ReviewsCounterLabel"; import { ProjectReview } from "./types"; export interface ProjectReviewListProps { @@ -45,7 +46,7 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL width: "1fr", render: (item) => { const { nApproved, nRejected } = getReviewsCount(item.reviews); - return ; + return ; }, }, { From 4588d3e201cdfd4f645d69dd36a4d8b77d8b132b Mon Sep 17 00:00:00 2001 From: Hussein Martinez Date: Wed, 27 Nov 2024 17:46:10 +0700 Subject: [PATCH 4/4] chore: rename pos/negReviews to positive/negativeReviews --- .../ProjectEvaluationList.tsx | 2 +- .../ProjectReviewList/ProjectReviewList.tsx | 2 +- .../ReviewsCounterLabel.stories.tsx | 24 +++++++++---------- .../ReviewsCounterLabel.tsx | 12 +++++----- 4 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx index 23a756fd..e47ce3f9 100644 --- a/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx +++ b/src/features/checker/components/ProjectEvaluationList/ProjectEvaluationList.tsx @@ -51,7 +51,7 @@ export const ProjectEvaluationList = ({ width: "1fr", render: (item) => { const { nApproved, nRejected } = getReviewsCount(item.reviews); - return ; + return ; }, }, { diff --git a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx index 46111bfb..06839dd2 100644 --- a/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx +++ b/src/features/checker/components/ProjectReviewList/ProjectReviewList.tsx @@ -46,7 +46,7 @@ export const ProjectReviewList = ({ reviewer, projects, action }: ProjectReviewL width: "1fr", render: (item) => { const { nApproved, nRejected } = getReviewsCount(item.reviews); - return ; + return ; }, }, { diff --git a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx index e074eb8e..a9f1f02c 100644 --- a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx +++ b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.stories.tsx @@ -6,13 +6,13 @@ const meta: Meta = { title: "features/Checker/Components/ReviewsCounterLabel", component: ReviewsCounterLabel, argTypes: { - posReviews: { + positiveReviews: { control: { type: "number", min: 0, }, }, - negReviews: { + negativeReviews: { control: { type: "number", min: 0, @@ -30,35 +30,35 @@ type Story = StoryObj; export const Default: Story = { args: { - posReviews: 0, - negReviews: 0, + positiveReviews: 0, + negativeReviews: 0, }, }; export const Pending: Story = { args: { - posReviews: 0, - negReviews: 0, + positiveReviews: 0, + negativeReviews: 0, }, }; export const WithoutMaxReviews: Story = { args: { - posReviews: 1, - negReviews: 2, + positiveReviews: 1, + negativeReviews: 2, }, }; export const WithMaxReviews: Story = { args: { - posReviews: 3, - negReviews: 2, + positiveReviews: 3, + negativeReviews: 2, }, }; export const TooManyReviews: Story = { args: { - posReviews: 300, - negReviews: 200, + positiveReviews: 300, + negativeReviews: 200, }, }; diff --git a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx index 8e7410d4..767cd234 100644 --- a/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx +++ b/src/features/checker/components/ReviewsCounterLabel/ReviewsCounterLabel.tsx @@ -14,23 +14,23 @@ const variants = tv({ }); interface ReviewsCounterLabelProps { - posReviews?: number; - negReviews?: number; + positiveReviews?: number; + negativeReviews?: number; className?: string; } export const ReviewsCounterLabel: React.FC = ({ - posReviews = 0, - negReviews = 0, + positiveReviews = 0, + negativeReviews = 0, className, }) => { const { text, container } = variants(); - const totalReviews = Math.max(0, posReviews) + Math.max(0, negReviews); + const totalReviews = Math.max(0, positiveReviews) + Math.max(0, negativeReviews); return (
- + {totalReviews ? `${totalReviews} Review${totalReviews > 1 ? "s" : ""}` : "Needs review"}