Refactor WordCountCard component

1-Harshit · Nov 17, 2023 · 9fce309 · 9fce309
1 parent 10c34c5
commit 9fce309
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 50 deletions.
diff --git a/src/components/card/WordCountCard.tsx b/src/components/card/WordCountCard.tsx
@@ -1,32 +1,36 @@
 // Chakra imports
-import { Flex, Stat, StatLabel, StatNumber, useColorModeValue, Text } from '@chakra-ui/react';
+import { Flex, Stat, StatLabel, StatNumber, useColorModeValue, Icon } from '@chakra-ui/react';
 // Custom components
 import Card from 'components/card/Card';
+import IconBox from 'components/icons/IconBox';
+import { MdFileCopy } from 'react-icons/md';
 
-export default function Default(props: {
-	startContent?: JSX.Element;
-	endContent?: JSX.Element;
-	name: string;
-	growth?: string | number;
-	value: string | number;
-}) {
-	const { startContent, endContent, name, growth, value } = props;
+export default function Default(props: {value: number}) {
+	const { value } = props;
 	const textColor = useColorModeValue('secondaryGray.900', 'white');
 	const textColorSecondary = 'secondaryGray.600';
+	const brandColor = useColorModeValue("brand.500", "white");
+	const boxBg = useColorModeValue("secondaryGray.300", "whiteAlpha.100");
 
 	return (
 		<Card py='15px'>
 			<Flex my='auto' h='100%' align={{ base: 'center', xl: 'start' }} justify={{ base: 'center', xl: 'center' }}>
-				{startContent}
-
-				<Stat my='auto' ms={startContent ? '18px' : '0px'}>
+				<IconBox
+					w="56px"
+					h="56px"
+					bg={boxBg}
+					icon={
+						<Icon w="32px" h="32px" as={MdFileCopy} color={brandColor} />
+					}
+				/>
+				<Stat my='auto' ms={'18px'}>
 					<StatLabel
 						lineHeight='100%'
 						color={textColorSecondary}
 						fontSize={{
 							base: 'sm'
 						}}>
-						{name}
+						Word Count
 					</StatLabel>
 					<StatNumber
 						id="word-count"
@@ -36,20 +40,7 @@ export default function Default(props: {
 						}}>
 						{value}
 					</StatNumber>
-					{growth ? (
-						<Flex align='center'>
-							<Text color='green.500' fontSize='xs' fontWeight='700' me='5px'>
-								{growth}
-							</Text>
-							<Text color='secondaryGray.600' fontSize='xs' fontWeight='400'>
-								since last month
-							</Text>
-						</Flex>
-					) : null}
 				</Stat>
-				<Flex ms='auto' w='max-content'>
-					{endContent}
-				</Flex>
 			</Flex>
 		</Card>
 	);

diff --git a/src/views/editor/index.tsx b/src/views/editor/index.tsx
@@ -25,24 +25,16 @@ import {
 	Box,
 	Grid,
 	GridItem,
-	Icon,
 	SimpleGrid,
-	useColorModeValue,
 } from "@chakra-ui/react";
-// Assets
+
 // Custom components
-import MiniStatistics from "components/card/WordCountCard";
+import WordCountCard from "components/card/WordCountCard";
 import EditorOptions from "components/editor/EditorOptions";
-import IconBox from "components/icons/IconBox";
-import { MdFileCopy } from "react-icons/md";
 import EditorArea from "components/editor/EditorArea";
 import { useState } from "react";
 
 export default function EditorHome() {
-	// Chakra Color Mode
-	const brandColor = useColorModeValue("brand.500", "white");
-	const boxBg = useColorModeValue("secondaryGray.300", "whiteAlpha.100");
-
 	const [wordCount, setWrordCount] = useState(0);
 
 	const handleContentChange = (e: React.SyntheticEvent) => {
@@ -62,20 +54,7 @@ export default function EditorHome() {
 					<EditorOptions name="Editor Options" />
 				</GridItem>
 				<GridItem colSpan={1}>
-					<MiniStatistics
-						startContent={
-							<IconBox
-								w="56px"
-								h="56px"
-								bg={boxBg}
-								icon={
-									<Icon w="32px" h="32px" as={MdFileCopy} color={brandColor} />
-								}
-							/>
-						}
-						name="Total Words"
-						value={wordCount}
-					/>
+					<WordCountCard value={wordCount} />
 				</GridItem>
 			</Grid>