big boned buttons

efdevcon · Jan 1, 2024 · ae9b2ff · ae9b2ff
1 parent af08213
commit ae9b2ff
Show file tree

Hide file tree

Showing 2 changed files with 21 additions and 8 deletions.
diff --git a/devcon/src/pages/index.tsx b/devcon/src/pages/index.tsx
@@ -128,7 +128,7 @@ export default pageHOC(function Index(props: any) {
                 <TinaMarkdown content={data.pages.section2?.right}></TinaMarkdown>
               </div>
             </div>
-            <Button size="md" color="purple-1" fill>
+            <Button fat color="purple-1" fill>
               {data.pages.section2?.button}
             </Button>
           </div>
@@ -143,7 +143,7 @@ export default pageHOC(function Index(props: any) {
               <div className="rich-text">
                 <TinaMarkdown content={data.pages.section3?.body}></TinaMarkdown>
               </div>
-              <Button size="md" color="purple-1" className="mt-8" fill>
+              <Button fat color="purple-1" className="mt-8" fill>
                 {data.pages.section3?.button}
               </Button>
             </div>
@@ -159,7 +159,7 @@ export default pageHOC(function Index(props: any) {
               <TinaMarkdown content={data.pages.section4?.body}></TinaMarkdown>
             </div>
 
-            <Button size="md" color="purple-1" className="relative z-10 pointer-events-auto" fill>
+            <Button fat color="purple-1" className="relative z-10 pointer-events-auto" fill>
               {data.pages.section4?.button}
             </Button>
 
@@ -256,7 +256,7 @@ export default pageHOC(function Index(props: any) {
           <div className="relative border-bottom pb-8">
             <TrackList tracks={props.tracks} />
 
-            <Button size="md" color="purple-1" fill className="mt-8">
+            <Button fat color="purple-1" fill className="mt-8">
               {data.pages.section6?.button}
             </Button>
 

diff --git a/lib/components/button/button.tsx b/lib/components/button/button.tsx
@@ -10,6 +10,7 @@ type ButtonProps = {
   circle?: boolean;
   square?: boolean;
   fill?: boolean;
+  fat?: boolean;
   size?: SizeType;
   color?: ColorType;
   [key: string]: any;
@@ -67,32 +68,37 @@ export const sizes = {
     text: "text-sm",
     icon: "[&>svg]:text-[0.85em]",
     padding: "py-1 px-2",
+    fat: "py-3 px-5",
   },
   md: {
     text: "text-sm",
     icon: "[&>svg]:text-[0.85em]",
     padding: "py-1 px-3",
+    fat: "py-3 px-5",
   },
   lg: {
     text: "text-md",
     icon: "[&>svg]:text-[0.82em]",
     padding: "py-1.5 px-4",
+    fat: "py-3 px-5",
   },
 } as {
   [K in SizeType]: {
     text: string;
     padding: string;
     icon: string;
+    fat: string;
   };
 };
 
 const applySize = (
   size: ButtonProps["size"] = "md",
   square?: boolean,
-  circle?: boolean
+  circle?: boolean,
+  fat?: boolean
 ) => {
   const sizeClasses = [];
-  const { icon, text, padding } = sizes[size];
+  const { icon, text, padding, fat: fatPadding } = sizes[size];
 
   sizeClasses.push(text);
 
@@ -101,8 +107,14 @@ const applySize = (
 
     if (circle) sizeClasses.push("!rounded-full");
   } else {
+    if (fat) {
+      sizeClasses.push(fatPadding);
+      sizeClasses.push("!rounded-full");
+    } else {
+      sizeClasses.push(padding);
+    }
+
     sizeClasses.push(icon);
-    sizeClasses.push(padding);
   }
 
   return sizeClasses.join(" ");
@@ -134,6 +146,7 @@ export const Button = (props: ButtonProps) => {
     circle,
     square,
     disabled,
+    fat,
     fill,
     color = "default",
     size = "md",
@@ -146,7 +159,7 @@ export const Button = (props: ButtonProps) => {
     "inline-flex items-center justify-center",
     fill ? "" : "border border-solid",
     rounded ? "rounded-md" : "",
-    applySize(size, square, circle),
+    applySize(size, square, circle, fat),
     disabled ? "opacity-50" : "",
   ];