WEB-53 Create icon component

src/components/puck/blocks/icon.tsx

@@ -0,0 +1,39 @@
+import { ComponentConfig } from "@puckeditor/core";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { IconName, DynamicIcon, dynamicIconImports } from 'lucide-react/dynamic';
+import { defineProps, responsive, field } from "@/lib/puck/define-props";
+import type { ResponsiveValue } from "@/lib/puck/responsive";
+import { resolveResponsive} from "@/lib/puck/responsive-tailwind";
+import { padding as paddingToken, hexCodeColor, type Spacing, type Color } from "@/lib/puck/tokens";
+
+
+type IconProps = {
+    size: number;
+    padding: ResponsiveValue<Spacing>;
+    color: Color;
+    icon?: IconName;
+};
+
+const props = defineProps({
+  size: field.raw( { type: "number" }, 55 ),
+  padding: responsive.select(paddingToken, { label: "Padding", default: "md" }),
+  color: field.select(hexCodeColor, { label: "Color", default: "sga-red" }),
+  icon: field.raw( { type: "text" }, undefined), 
+});
+
+export const Icon: ComponentConfig<IconProps> = {
+    label: "Icon",
+  inline: true,
+  ...props,
+  render: ({ size, padding, color, icon, puck }) => {
+        const resolvedIcon = (icon && (icon in dynamicIconImports)) ? icon : "landmark";
+
+        return (<div ref={puck.dragRef} className={`flex align-items-center justify-items-center`}>
+            <DynamicIcon 
+            className={cn(
+                    resolveResponsive(padding, paddingToken.classes),
+                  )} name={resolvedIcon} size={size} color={hexCodeColor.classes[color]}/>
+        </div>);
+    }
+};

src/lib/puck/tokens.ts

@@ -136,6 +136,19 @@ export const bgColor = defineToken({
   "sga-red":            { label: "SGA Red",             classes: "bg-sga-red" },
 });
 
+export const hexCodeColor = defineToken({
+  background:           { label: "Background",         classes: "#ffffff" },
+  foreground:           { label: "Foreground",          classes: "#0a0a0a" },
+  primary:              { label: "Primary",             classes: "#171717" },
+  "primary-foreground": { label: "Primary Foreground",  classes: "#fafafa" },
+  muted:                { label: "Muted",               classes: "#f5f5f5" },
+  "muted-foreground":   { label: "Muted Foreground",    classes: "#737373" },
+  accent:               { label: "Accent",              classes: "#f5f5f5" },
+  "accent-foreground":  { label: "Accent Foreground",   classes: "#171717" },
+  destructive:          { label: "Destructive",         classes: "#e7000b" },
+  "sga-red":            { label: "SGA Red",             classes: "#C8102E" },
+});
+
 export const textColor = defineToken({
   background:           { label: "Background",         classes: "text-background" },
   foreground:           { label: "Foreground",          classes: "text-foreground" },

src/puck.config.tsx

@@ -6,11 +6,12 @@ import { RichTextComponent } from "@/components/puck/blocks/rich-text";
 import { Media } from "@/components/puck/blocks/media";
 import { PuckButton } from "@/components/puck/blocks/button";
 import { Section } from "@/components/puck/blocks/section";
+import { Icon } from "./components/puck/blocks/icon";
 
 export const config = {
   categories: {
     layout: { title: "Layout", components: ["Section", "Container", "Columns", "Grid"] },
-    content: { title: "Content", components: ["Text", "Image"] },
+    content: { title: "Content", components: ["Text", "Image", "Icon"] },
     interactive: { title: "Interactive", components: ["Button"] },
   },
   components: {
@@ -21,6 +22,7 @@ export const config = {
     Text: RichTextComponent,
     Image: Media,
     Button: PuckButton,
+    Icon,
   },
 } satisfies Config;