first commit

src/components/utils/IconRound.tsx

@@ -0,0 +1,86 @@
+"use client";
+
+import React, { memo } from "react";
+import Image from "next/image";
+import clsx from "clsx";
+import icons from "@/constant/images/icons";
+
+// 👉 Types
+export const ICON_ROUND_TYPES = [
+  "successPlay",
+  "success",
+  "error",
+  "errorEnd",
+  "errorGoods",
+] as const;
+
+export type IconRoundType = (typeof ICON_ROUND_TYPES)[number];
+
+export interface PropsIconRound {
+  type?: IconRoundType;
+  icon?: React.ReactNode;
+  className?: string;
+  size?: number;
+}
+
+// 👉 Icon map
+const iconMap = {
+  success: icons.tickCircle,
+  successPlay: icons.successPlay,
+  error: icons.errorWarning,
+  errorEnd: icons.errorEnd,
+  errorGoods: icons.errorGoods,
+};
+
+// 🎨 Background mapping
+const outerBgMap: Record<IconRoundType, string> = {
+  success: "bg-green-100",
+  successPlay: "bg-green-100",
+  error: "bg-red-100",
+  errorEnd: "bg-red-100",
+  errorGoods: "bg-red-100",
+};
+
+const innerBgMap: Record<IconRoundType, string> = {
+  success: "bg-green-200",
+  successPlay: "bg-green-200",
+  error: "bg-red-200",
+  errorEnd: "bg-red-200",
+  errorGoods: "bg-red-200",
+};
+
+function IconRound({
+  type = "success",
+  icon,
+  className,
+  size = 24,
+}: PropsIconRound) {
+  const renderDefaultIcon = () => {
+    const imgSrc = iconMap[type] ?? icons.tickCircle;
+    return (
+      <Image alt={`icon ${type}`} src={imgSrc} width={size} height={size} />
+    );
+  };
+
+  return (
+    <div
+      className={clsx(
+        "p-2 rounded-full flex items-center justify-center w-fit h-fit",
+        outerBgMap[type],
+        className,
+      )}
+    >
+      <div
+        className={clsx(
+          "flex items-center justify-center rounded-full p-2",
+          innerBgMap[type],
+        )}
+        style={{ width: 40, height: 40 }}
+      >
+        {icon ?? renderDefaultIcon()}
+      </div>
+    </div>
+  );
+}
+
+export default memo(IconRound);