Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 8x 6x 8x 2x 2x 8x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 60x 4x 56x 56x 56x 56x 56x 56x 56x 56x 60x 60x 60x 240x 240x 240x 240x 240x 60x 60x 60x 60x | import { useState } from 'react';
// Components
import { CommentStatCard } from '@/components/CommentStatCard';
// Constants
import { commentStatCardVariants } from '@/constants';
// Types
import { CommentStatCardVariantKey } from '@/types';
export const CARD_LABELS = {
TOTAL: 'Total comments',
GOOD: 'Good comments',
BAD: 'Bad comments',
UNREAD: 'Unread',
} as const;
interface CommentsSummarySectionProps {
startDate: string;
endDate: string;
isSingleDay?: boolean;
totalComments: number;
goodComments: number;
badComments: number;
unreadComments: number;
activeCard?: string | null;
onCardClick?: (label: string) => void;
}
export const CommentsSummarySection = ({
startDate,
endDate,
isSingleDay = false,
totalComments,
goodComments,
badComments,
unreadComments,
activeCard: activeCardProp,
onCardClick,
}: CommentsSummarySectionProps) => {
const [internalActiveCard, setInternalActiveCard] = useState<string | null>(
CARD_LABELS.TOTAL,
);
const isControlled = activeCardProp !== undefined;
const activeCard = isControlled ? activeCardProp : internalActiveCard;
const handleCardClick = (label: string) => {
if (isControlled) {
onCardClick?.(label);
} else {
setInternalActiveCard(label);
}
};
const statCards = [
{
count: totalComments,
label: CARD_LABELS.TOTAL,
...commentStatCardVariants[CommentStatCardVariantKey.TOTAL],
onClick: () => handleCardClick(CARD_LABELS.TOTAL),
},
{
count: goodComments,
label: CARD_LABELS.GOOD,
...commentStatCardVariants[CommentStatCardVariantKey.GOOD],
onClick: () => handleCardClick(CARD_LABELS.GOOD),
},
{
count: badComments,
label: CARD_LABELS.BAD,
...commentStatCardVariants[CommentStatCardVariantKey.BAD],
onClick: () => handleCardClick(CARD_LABELS.BAD),
},
{
count: unreadComments,
label: CARD_LABELS.UNREAD,
...commentStatCardVariants[CommentStatCardVariantKey.UNREAD],
onClick: () => handleCardClick(CARD_LABELS.UNREAD),
},
];
return (
<div className="flex flex-col gap-4">
<p className="text-xs font-semibold text-primary-700">
{isSingleDay ? (
endDate
) : (
<>
<span className="font-normal text-muted-foreground dark:text-background">
From
</span>
{` ${startDate} `}
<span className="font-normal text-muted-foreground dark:text-background">
to
</span>
{` ${endDate}`}
</>
)}
</p>
<div className="grid grid-cols-2 xl:grid-cols-4 gap-4">
{statCards.map((card) => (
<CommentStatCard
key={card.label}
{...card}
isActive={activeCard === card.label}
/>
))}
</div>
</div>
);
};
|