4-types-dynamic-Rounded-Buttons

src/app/page.tsx

@@ -1,3 +1,7 @@
+import { CapsuleButton } from "@/components/buttons/capsule-buttons/capsule-button";
+import { CapsuleButtonPlainBG } from "@/components/buttons/capsule-buttons/capsule-button-whiteBG";
+import { RoundButton } from "@/components/buttons/round-buttons/round-button";
+import { RoundButtonPlainBG } from "@/components/buttons/round-buttons/round-button-whiteBG";
 import Image from "next/image";
 
 export default function Home() {

src/components/buttons/capsule-buttons/capsule-button-whiteBG.tsx

@@ -0,0 +1,98 @@
+import React from "react";
+
+const sizeClasses = {
+  xs: "h-6 px-2 gap-2 width-auto", // Custom height and padding for xs
+  sm: "h-8 px-3 gap-2 width-auto", // Custom height and padding for sm
+  md: "h-9 px-4 gap-2 width-auto", // Custom height and padding for md
+  lg: "h-11 px-4 gap-2 width-auto", // Custom height and padding for lg
+} as const;
+
+const colorClasses = {
+  default: "text-base-content border-base-content",
+  primary: "text-primary border-primary",
+  secondary: "text-secondary border-secondary",
+  accent: "text-accent border-accent",
+  //   neutral: "text-base-content border-line-color",
+  //   ghost: "bg-ghost text-base-content",
+  //   link: "bg-transparent text-link-text underline decoration-[#790E4A]",
+  success: "text-success border-success",
+  warning: "text-warning border-warning",
+  error: "text-error border-error",
+} as const;
+
+const iconSrc = {
+  default: "/h-icon/solid/heart.svg",
+  primary: "/h-icon/solid/darkpink-heart.svg",
+  secondary: "/h-icon/solid/full-blue-heart.svg",
+  accent: "/h-icon/solid/full-purple-heart.svg",
+  //   neutral: "/h-icon/solid/heart.svg",
+  //   ghost: "/h-icon/solid/heart.svg",
+  //   link: "/h-icon/solid/darkpink-heart.svg",
+  success: "/h-icon/solid/full-green-heart.svg",
+  warning: "/h-icon/solid/full-yellow-heart.svg",
+  error: "/h-icon/solid/full-red-heart.svg",
+} as const;
+
+const iconSizeClasses = {
+  xs: "w-[14px] h-[14px]",
+  sm: "w-[14px] h-[14px]",
+  md: "w-[16px] h-[16px]",
+  lg: "w-[20px] h-[20px]",
+} as const;
+
+type CapsuleButtonPlainBGProps = {
+  label: string;
+  size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg'
+  color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses`
+  onClick?: () => void; // Optional click handler
+  className?: string; // Additional Tailwind classes
+};
+
+export const CapsuleButtonPlainBG: React.FC<CapsuleButtonPlainBGProps> = ({
+  label,
+  size = "md", // Default size
+  color = "secondary", // Default color
+  onClick,
+  className,
+}) => {
+  // Shared button styles
+  const commonClasses = `
+    inline-flex 
+    items-center 
+    justify-center 
+    gap-2 
+    flex-shrink-0 
+    rounded-full 
+    border-2
+  `;
+
+  const iconPath = iconSrc[color];
+  const iconSize = iconSizeClasses[size];
+
+  // Combine all classes
+  const buttonClasses = `
+   ${commonClasses} 
+   ${colorClasses[color]} 
+   ${sizeClasses[size]} 
+   drop-shadow-lg
+ `;
+  // Custom box shadow
+  const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]";
+
+  //console.log("Button Classes:", buttonClasses);
+
+  return (
+    <button
+      className={`${buttonClasses} ${customBoxShadow} ${className ?? ""}`}
+      onClick={onClick}
+    >
+      {/* Icon on the left */}
+      <img src={iconPath} alt="Heart Icon Left" className={iconSize} />
+      <span>{label}</span>
+      {/* Icon on the right */}
+      <img src={iconPath} alt="Heart Icon Right" className={iconSize} />
+    </button>
+  );
+};
+
+export default CapsuleButtonPlainBG;

src/components/buttons/capsule-buttons/capsule-button.tsx

@@ -0,0 +1,100 @@
+import React from "react";
+
+const sizeClasses = {
+  xs: "h-6 px-2 gap-2 width-auto", // Custom height and padding for xs
+  sm: "h-8 px-3 gap-2 width-auto", // Custom height and padding for sm
+  md: "h-9 px-4 gap-2 width-auto", // Custom height and padding for md
+  lg: "h-11 px-4 gap-2 width-auto", // Custom height and padding for lg
+} as const;
+
+const colorClasses = {
+  default: "bg-default text-base-content border-line-color",
+  primary: "bg-primary text-primary-text border-line-color",
+  secondary: "bg-secondary text-secondary-text border-line-color",
+  accent: "bg-accent text-accent-text border-line-color",
+  neutral: "bg-neutral text-base-content border-line-color",
+  ghost: "bg-ghost text-base-content",
+  link: "bg-transparent text-link-text underline decoration-[#790E4A]",
+  success: "bg-success text-base-content border-line-color",
+  warning: "bg-warning text-base-content border-line-color",
+  error: "bg-error text-base-content border-line-color",
+} as const;
+
+const iconSrc = {
+  default: "/h-icon/solid/heart.svg",
+  primary: "/h-icon/solid/pink-heart.svg",
+  secondary: "/h-icon/solid/blue-heart.svg",
+  accent: "/h-icon/solid/purple-heart.svg",
+  neutral: "/h-icon/solid/heart.svg",
+  ghost: "/h-icon/solid/heart.svg",
+  link: "/h-icon/solid/darkpink-heart.svg",
+  success: "/h-icon/solid/heart.svg",
+  warning: "/h-icon/solid/heart.svg",
+  error: "/h-icon/solid/heart.svg",
+} as const;
+
+const iconSizeClasses = {
+  xs: "w-[14px] h-[14px]",
+  sm: "w-[14px] h-[14px]",
+  md: "w-[16px] h-[16px]",
+  lg: "w-[20px] h-[20px]",
+} as const;
+
+type CapsuleButtonProps = {
+  label: string;
+  size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg'
+  color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses`
+  onClick?: () => void; // Optional click handler
+  className?: string; // Additional Tailwind classes
+};
+
+export const CapsuleButton: React.FC<CapsuleButtonProps> = ({
+  label,
+  size = "md", // Default size
+  color = "secondary", // Default color
+  onClick,
+  className,
+}) => {
+  // Shared button styles
+  const commonClasses = `
+    inline-flex 
+    items-center 
+    justify-center 
+    gap-2 
+    flex-shrink-0 
+    rounded-full 
+    ${color === "ghost" || color === "link" ? "" : "border-2"}
+  `;
+
+  const iconPath = iconSrc[color];
+  const iconSize = iconSizeClasses[size];
+
+  // Combine all classes
+  const buttonClasses = `
+   ${commonClasses} 
+   ${colorClasses[color]} 
+   ${sizeClasses[size]} 
+   drop-shadow-lg
+ `;
+  // Custom box shadow
+  const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]";
+
+  //console.log("Button Classes:", buttonClasses);
+
+  return (
+    <button
+      className={`${buttonClasses} ${
+        color === "ghost" || color === "link" ? "" : customBoxShadow
+      } ${className ?? ""}`}
+      onClick={onClick}
+    >
+      {/* Icon on the left */}
+      <img src={iconPath} alt="Heart Icon Left" className={iconSize} />
+      <span>{label}</span>
+      {/* Icon on the right */}
+      <img src={iconPath} alt="Heart Icon Right" className={iconSize} />
+    </button>
+  );
+};
+
+export default CapsuleButton;

src/components/buttons/round-buttons/round-button-whiteBG.tsx

@@ -0,0 +1,94 @@
+import React from "react";
+
+const sizeClasses = {
+  xs: "w-[var(--t-spacing-6, 24px)] h-[var(--t-spacing-6, 24px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-2, 8px) gap-2", // Circle size for xs
+  sm: "w-[var(--t-spacing-8, 32px)] h-[var(--t-spacing-8, 32px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-3, 12px) gap-2", // Circle size for sm
+  md: "w-[var(--t-spacing-9, 36px)] h-[var(--t-spacing-9, 36px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for md
+  lg: "w-[var(--t-spacing-11, 44px)] h-[var(--t-spacing-11, 44px)] p-[var(--t-spacing-0, 0px)] var(--t-spacing-4, 16px) gap-2", // Circle size for lg
+} as const;
+
+const colorClasses = {
+  default: "text-base-content border-base-content",
+  primary: "text-primary border-primary",
+  secondary: "text-secondary border-secondary",
+  accent: "text-accent border-accent",
+  success: "text-success border-success",
+  warning: "text-warning border-warning",
+  error: "text-error border-error",
+} as const;
+
+const iconSrc = {
+  default: "/h-icon/solid/heart.svg",
+  primary: "/h-icon/solid/darkpink-heart.svg",
+  secondary: "/h-icon/solid/full-blue-heart.svg",
+  accent: "/h-icon/solid/full-purple-heart.svg",
+  success: "/h-icon/solid/full-green-heart.svg",
+  warning: "/h-icon/solid/full-yellow-heart.svg",
+  error: "/h-icon/solid/full-red-heart.svg",
+} as const;
+
+const iconSizeClasses = {
+  xs: "w-[14px] h-[14px]",
+  sm: "w-[14px] h-[14px]",
+  md: "w-[16px] h-[16px]",
+  lg: "w-[20px] h-[20px]",
+} as const;
+
+type RoundButtonPlainBGProps = {
+  size?: keyof typeof sizeClasses; // 'xs' | 'sm' | 'md' | 'lg'
+  color?: keyof typeof colorClasses; // Explicitly type `color` to be a key of `colorClasses`
+  onClick?: () => void; // Optional click handler
+  className?: string; // Additional Tailwind classes
+};
+
+export const RoundButtonPlainBG: React.FC<RoundButtonPlainBGProps> = ({
+  size = "md", // Default size
+  color = "secondary", // Default color
+  onClick,
+  className,
+}) => {
+  // Shared button styles
+  const commonClasses = `
+    flex 
+    items-center 
+    justify-center     
+    flex-shrink-0 
+    gap-2
+    rounded-full 
+    border-2
+  `;
+
+  const iconPath = iconSrc[color];
+  const iconSize = iconSizeClasses[size];
+
+  console.log("icon path: iconsize", iconPath, iconSize);
+
+  // Combine all classes
+  const buttonClasses = `
+   ${commonClasses} 
+   ${colorClasses[color]} 
+   ${sizeClasses[size]} 
+   drop-shadow-lg
+ `;
+  console.log("Button Classes:", buttonClasses);
+  // Custom box shadow
+  const customBoxShadow = "shadow-[1px_2px_0px_0px_#000,1px_4px_0px_0px_#000]";
+
+  //console.log("Button Classes:", buttonClasses);
+
+  return (
+    <button
+      className={`${buttonClasses} ${customBoxShadow} ${className ?? ""}`}
+      onClick={onClick}
+    >
+      {/* Icon on the left */}
+      <img
+        src={iconPath}
+        alt="Heart Icon"
+        className={`${iconSize} flex-shrink-0`}
+      />
+    </button>
+  );
+};
+
+export default RoundButtonPlainBG;