refactored with twmerge

UoaWDCC · Aug 15, 2023 · 8cb76c4 · 8cb76c4
1 parent 36b3f21
commit 8cb76c4
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 4 deletions.
diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import { twMerge } from "tailwind-merge";
 
 /**
  * @param label button text
@@ -10,12 +11,14 @@ const Button = ({widthFull, onClick, disabled, label}: ButtonInputProps) => {
   return (
     //TODO: colours
     <button
-      className={`h-14 rounded text-white font-semibold text-sm bg-[#3767af] active:bg-[#264a7f] disabled:bg-[#BFBFBF]
-        ${widthFull ? "w-full" : "w-72"}`}
+      className={twMerge(
+        "h-14 rounded text-white font-semibold text-sm bg-[#3767af] active:bg-[#264a7f] disabled:bg-[#BFBFBF] uppercase",
+        widthFull ? "w-full" : "w-72",
+      )}
       onClick={onClick}
       disabled={disabled}
     >
-      {label.toUpperCase()}
+      {label}
     </button>
   );
 };

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -4,10 +4,11 @@
 
 import { PropsWithChildren } from "react";
 import CardProps from "./CardProps";
+import { twMerge } from "tailwind-merge";
 
 const Card = ({onClick, className, children} : PropsWithChildren<CardProps>) => {
   return (
-    <div onClick={onClick} className={`rounded-md ` + className}>
+    <div onClick={onClick} className={twMerge("rounded-md", className)}>
       {children}
     </div>
   );