feat: add props in VisitorCounter components

add props in VisitorCounter components"#164"
modern-agile-team · Oct 3, 2022 · a32557e · a32557e
1 parent a580995
commit a32557e
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 8 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -39,7 +39,7 @@ function App() {
       <Channel />
       <Channels />
 
-      <VisitorCounter />
+      <VisitorCounter titleColor="red" />
       <VisitorComment
         id="['VisitorComment', 'akar-icons:comment-add']"
         inputBackgroundColor="red"

diff --git a/src/lib/common/types/ComponentTypes/VisitorCounterType.ts b/src/lib/common/types/ComponentTypes/VisitorCounterType.ts
@@ -35,6 +35,9 @@ export interface VisitorCounterPropsType {
    * Color of total visit count used in 'big-size' and 'simple' (default: red)
    */
   totalBoldColor?: string;
+  titleColor?: string;
+  todayTitleColor?: string;
+  totalTitleColor?: string;
 }
 
 export interface IndexPropsType extends VisitorCounterPropsType {
@@ -63,4 +66,7 @@ export interface VisitorCounterStylePropsType {
    * Color of total visit count used in 'big-size' and 'simple' (default: red)
    */
   totalBoldColor?: string;
+  titleColor?: string;
+  todayTitleColor?: string;
+  totalTitleColor?: string;
 }
diff --git a/src/lib/components/VisitorCounter/BigSize.tsx b/src/lib/components/VisitorCounter/BigSize.tsx
@@ -16,16 +16,19 @@ export const BigSize = (props: VisitorCounterPropsType) => {
     size,
     todayBoldColor,
     totalBoldColor,
+    titleColor,
+    todayTitleColor,
+    totalTitleColor,
   } = props;
 
   return (
-    <Wrap backgroundColor={backgroundColor} size={size}>
+    <Wrap backgroundColor={backgroundColor} size={size} titleColor={titleColor}>
       <span className="title">{title}</span>
-      <Today todayBoldColor={todayBoldColor}>
+      <Today todayBoldColor={todayBoldColor} todayTitleColor={todayTitleColor}>
         <span className="today">{todayTitle}</span>
         <span className="today-visitor">{todayVisitor}</span>
       </Today>
-      <Total totalBoldColor={totalBoldColor}>
+      <Total totalBoldColor={totalBoldColor} totalTitleColor={totalTitleColor}>
         <span className="total">{totalTitle}</span>
         <span className="total-visitor">{totalVisitor}</span>
       </Total>
@@ -46,6 +49,7 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
     padding: 10px;
     flex-grow: 1;
     font-weight: bold;
+    color: ${({ titleColor }) => titleColor ?? 'black'};
   }
 `;
 
@@ -54,6 +58,7 @@ const Today = styled.div<VisitorCounterStylePropsType>`
   padding: 10px;
   .today {
     margin-right: 5em;
+    color: ${({ todayTitleColor }) => todayTitleColor ?? 'black'};
   }
   .today-visitor {
     font-weight: bold;
@@ -66,6 +71,7 @@ const Total = styled.div<VisitorCounterStylePropsType>`
   padding: 10px;
   .total {
     margin-right: 5em;
+    color: ${({ totalTitleColor }) => totalTitleColor ?? 'black'};
   }
   .total-visitor {
     font-weight: bold;

diff --git a/src/lib/components/VisitorCounter/Default.tsx b/src/lib/components/VisitorCounter/Default.tsx
@@ -6,11 +6,11 @@ import {
 } from '../../common/types/ComponentTypes/VisitorCounterType';
 
 const Default = (props: VisitorCounterPropsType) => {
-  const { title, todayVisitor, totalVisitor, backgroundColor, size } = props;
+  const { title, todayVisitor, totalVisitor, backgroundColor, size, titleColor } = props;
 
   return (
     <Wrap size={size}>
-      <Counter backgroundColor={backgroundColor}>
+      <Counter backgroundColor={backgroundColor} titleColor={titleColor}>
         <span className="title">{title}</span>
         <span className="today">{todayVisitor}</span>
         <span className="total">{totalVisitor}</span>
@@ -35,8 +35,10 @@ const Counter = styled.div<VisitorCounterStylePropsType>`
   border: 1px solid #989898;
   border-radius: 5px;
   overflow: hidden;
+  background-color: white;
   .title {
     background-color: ${({ backgroundColor }) => backgroundColor ?? '#91c230c4'};
+    color: ${({ titleColor }) => titleColor ?? 'black'};
   }
   .today {
     border-left: 1px solid #989898;

diff --git a/src/lib/components/VisitorCounter/Simple.tsx b/src/lib/components/VisitorCounter/Simple.tsx
@@ -6,10 +6,26 @@ import {
 } from '../../common/types/ComponentTypes/VisitorCounterType';
 
 export const Simple = (props: VisitorCounterPropsType) => {
-  const { todayTitle, todayVisitor, totalTitle, totalVisitor, size, todayBoldColor, totalBoldColor } = props;
+  const {
+    todayTitle,
+    todayVisitor,
+    totalTitle,
+    totalVisitor,
+    size,
+    todayBoldColor,
+    totalBoldColor,
+    todayTitleColor,
+    totalTitleColor,
+  } = props;
 
   return (
-    <Wrap size={size} todayBoldColor={todayBoldColor} totalBoldColor={totalBoldColor}>
+    <Wrap
+      size={size}
+      todayBoldColor={todayBoldColor}
+      totalBoldColor={totalBoldColor}
+      todayTitleColor={todayTitleColor}
+      totalTitleColor={totalTitleColor}
+    >
       <span className="today">{todayTitle}</span>
       <span className="today-visitor">{todayVisitor}</span>
       <span className="total">{totalTitle}</span>
@@ -23,6 +39,9 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
   span {
     padding: 3px;
   }
+  .today {
+    color: ${({ todayTitleColor }) => todayTitleColor ?? 'black'};
+  }
   .today-visitor {
     font-weight: bold;
     color: ${({ todayBoldColor }) => todayBoldColor ?? 'red'};
@@ -33,6 +52,9 @@ const Wrap = styled.div<VisitorCounterStylePropsType>`
       color: black;
     }
   }
+  .total {
+    color: ${({ totalTitleColor }) => totalTitleColor ?? 'black'};
+  }
   .total-visitor {
     font-weight: bold;
     color: ${({ totalBoldColor }) => totalBoldColor ?? 'black'};