refactor: Finish stretch goal requirements for BlogCard component

chadgrover · Jul 17, 2024 · f0b8c00 · f0b8c00
1 parent 7ce0a07
commit f0b8c00
Show file tree

Hide file tree

Showing 5 changed files with 94 additions and 25 deletions.
diff --git a/assets/icons/ui/ArrowRight.tsx b/assets/icons/ui/ArrowRight.tsx
@@ -0,0 +1,26 @@
+import { IArrowRightProps } from "./ArrowRight.types";
+
+const ArrowRight = ({
+  strokeWidth,
+  stroke,
+  addClassName,
+}: IArrowRightProps) => (
+  <svg
+    aria-hidden="true"
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    viewBox="0 0 24 24"
+    strokeWidth={strokeWidth}
+    stroke={stroke}
+    className={`w-4 h-4 ${addClassName ? addClassName : ""}`}
+  >
+    <path
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+    />
+  </svg>
+);
+
+export default ArrowRight;
+
diff --git a/assets/icons/ui/ArrowRight.types.ts b/assets/icons/ui/ArrowRight.types.ts
@@ -0,0 +1,8 @@
+interface IArrowRightProps {
+  stroke: string;
+  strokeWidth: string;
+  addClassName?: string;
+}
+
+export type { IArrowRightProps };
+
diff --git a/components/BlogCard/BlogCard.tsx b/components/BlogCard/BlogCard.tsx
@@ -1,5 +1,9 @@
+"use server";
+
 import { memo } from "react";
 import Image from "next/image";
+import ArrowRight from "@/assets/icons/ui/ArrowRight";
+import { formatButtonVariantClassName } from "@/lib/utils/formatting";
 import { ITagProps, IBlogCardProps, IButtonProps } from "./BlogCard.types";
 
 const Tag: React.FC<ITagProps> = ({ tag }) => (
@@ -14,31 +18,30 @@ const Button: React.FC<IButtonProps> = ({
   children,
   variant = "primary",
   ...rest
-}) => (
-  <button
-    {...rest}
-    type={type}
-    className={`flex flex-row items-center text-base gap-2 ${addClassName}`}
-  >
-    <span className="text-indigo-700">{children}</span>
-    <svg
-      aria-hidden="true"
-      focusable="false"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="none"
-      viewBox="0 0 24 24"
-      stroke-width="2"
-      stroke="currentColor"
-      className="w-4 h-4 stroke-indigo-700"
+}) => {
+  const BASE_BUTTON_CLASSES =
+    "w-fit flex flex-row items-center text-base gap-2 p-px";
+
+  return (
+    <button
+      {...rest}
+      type={type}
+      disabled={variant === "disabled"}
+      className={formatButtonVariantClassName(
+        variant,
+        BASE_BUTTON_CLASSES,
+        addClassName
+      )}
     >
-      <path
-        stroke-linecap="round"
-        stroke-linejoin="round"
-        d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3"
+      <span>{children}</span>
+      <ArrowRight
+        strokeWidth="3"
+        stroke="currentColor"
+        addClassName="stroke-indigo-700"
       />
-    </svg>
-  </button>
-);
+    </button>
+  );
+};
 
 const BlogCard: React.FC<IBlogCardProps> = memo(
   ({ imageUrl, tags, title, description }) => (
@@ -47,7 +50,9 @@ const BlogCard: React.FC<IBlogCardProps> = memo(
         <Image
           src={imageUrl}
           alt="A picture for the blog post"
+          priority={true}
           fill
+          sizes="340px"
           className="w-full object-cover"
         />
       </figure>

diff --git a/lib/utils/formatting.ts b/lib/utils/formatting.ts
@@ -1,5 +1,5 @@
 /**
- * 
+ *
  * @param firstName The first name of the user
  * @param lastName The last name of the user
  * @returns A formatted full name with proper capitalization
@@ -13,4 +13,28 @@ const formatFullName = (firstName: string, lastName: string): string => {
   return `${capitalizedFirstName} ${capitalizedLastName}`;
 };
 
-export { formatFullName };
+/**
+ * 
+ * @param variant The variant of the button
+ * @param baseClasses The base classes for the button
+ * @param addClassName Additional classes to add to the button (optional)
+ * @returns A formatted className for the button based on the variant
+ */
+
+const formatButtonVariantClassName = (
+  variant: string,
+  baseClasses: string,
+  addClassName?: string
+): string => {
+  switch (variant) {
+    case "primary":
+      return `${baseClasses} hover:cursor-pointer text-indigo-700 hover:text-custom-indigo-hover focus:ring-violet-200 focus:ring focus:outline-none rounded-md ${addClassName ? addClassName : ""}`;
+    case "disabled":
+      return `${baseClasses} hover:cursor-default text-custom-slate-disabled ${addClassName ? addClassName : ""}`;
+    default:
+      return `${baseClasses} ${addClassName ? addClassName : ""}`;
+  }
+};
+
+export { formatFullName, formatButtonVariantClassName };
+
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -4,6 +4,8 @@ const config: Config = {
   content: [
     "./components/**/*.{js,ts,jsx,tsx,mdx}",
     "./app/**/*.{js,ts,jsx,tsx,mdx}",
+    "./assets/**/*.{js,ts,jsx,tsx,mdx}",
+    "./lib/**/*.{js,ts,jsx,tsx,mdx}",
   ],
   theme: {
     extend: {
@@ -14,6 +16,10 @@ const config: Config = {
       },
       fontFamily: {
         "noto-sans": ["Noto Sans", "sans-serif"],
+      },
+      colors: {
+        "custom-indigo-hover": "#3730A3",
+        "custom-slate-disabled": "#A3A3A3",
       }
     },
   },