Add counters to buttons in supporters section

opentofu · Aug 31, 2023 · c158a23 · c158a23
1 parent bae2f54
commit c158a23
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 6 deletions.
diff --git a/src/components/Supporters/index.tsx b/src/components/Supporters/index.tsx
@@ -5,33 +5,67 @@ type ToggleButtonProps = {
   children: React.ReactNode;
   isActive: boolean;
   onClick: () => void;
+  count?: number;
 };
 
-function ToggleButton({ children, isActive, onClick }: ToggleButtonProps) {
+function ToggleButton({
+  children,
+  isActive,
+  count,
+  ...rest
+}: ToggleButtonProps) {
   return (
     <button
       type="button"
       className={clsx(
-        "border font-semibold text-white h-12 px-6 flex items-center hover:no-underline",
+        "border text-white h-12 px-6 flex items-center hover:no-underline",
         isActive ? "border-white" : "border-white/20"
       )}
+      {...rest}
     >
       {children}
+      {count && (
+        <sup className="ml-2 mt-2 text-brandLight text-base font-bold">
+          {count}
+        </sup>
+      )}
     </button>
   );
 }
 
 export default function Supporters() {
+  const [activeTab, setActiveTab] = React.useState("all");
   return (
     <section className="py-12 mx-auto container">
       <h3 className="text-center text-5xl font-bold mb-7">Supporters</h3>
       <div className="flex gap-6 justify-center">
-        <ToggleButton isActive onClick={() => {}}>
+        <ToggleButton
+          isActive={activeTab === "all"}
+          onClick={() => setActiveTab("all")}
+        >
           All
         </ToggleButton>
-        <ToggleButton onClick={() => {}}>Companies</ToggleButton>
-        <ToggleButton onClick={() => {}}>Individuals</ToggleButton>
-        <ToggleButton onClick={() => {}}>Projects</ToggleButton>
+        <ToggleButton
+          isActive={activeTab === "companies"}
+          onClick={() => setActiveTab("companies")}
+          count={12}
+        >
+          Companies
+        </ToggleButton>
+        <ToggleButton
+          isActive={activeTab === "individuals"}
+          onClick={() => setActiveTab("individuals")}
+          count={34}
+        >
+          Individuals
+        </ToggleButton>
+        <ToggleButton
+          isActive={activeTab === "projects"}
+          onClick={() => setActiveTab("projects")}
+          count={56}
+        >
+          Projects
+        </ToggleButton>
       </div>
     </section>
   );

diff --git a/tailwind.config.js b/tailwind.config.js
@@ -6,6 +6,7 @@ module.exports = {
       colors: {
         brand: "#933EFF",
         brandMuted: "#AA4EE7",
+        brandLight: "#AA67FF",
         dark1: "#0C192B",
         dark2: "#14253D",
         light1: "#E5E6E6",