Feat/flowexample section

src/blocks/FlowExampleBlock.ts

@@ -0,0 +1,161 @@
+import { iconField } from "@mvriu5/payload-icon-picker"
+import type { Block, Field } from "payload"
+
+function flowIconField(): Field {
+    return iconField({
+        name: "icon",
+        label: "Icon",
+        required: true,
+        placeholder: "Search icons",
+        noResultsLabel: "No icons found",
+        admin: { position: "sidebar" },
+    })
+}
+
+export const FlowExampleBlock: Block = {
+    slug: "flowExample",
+    labels: {
+        singular: "Flow Example",
+        plural: "Flow Examples",
+    },
+    fields: [
+        {
+            type: "collapsible",
+            label: "Section",
+            fields: [
+                {
+                    name: "sectionHeading",
+                    label: "Section Heading",
+                    type: "text",
+                    localized: true,
+                },
+                {
+                    name: "sectionLayout",
+                    label: "Section Layout",
+                    type: "select",
+                    required: true,
+                    defaultValue: "center",
+                    options: [
+                        { label: "Center", value: "center" },
+                        { label: "Left", value: "left" },
+                    ],
+                },
+                {
+                    name: "sectionDescription",
+                    label: "Section Description",
+                    type: "textarea",
+                    localized: true,
+                },
+                {
+                    name: "sectionLinkButton",
+                    label: "Section Link Button",
+                    type: "group",
+                    fields: [
+                        { name: "label", type: "text", localized: true },
+                        { name: "url", type: "text" },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "contentHeading",
+            label: "Content Heading",
+            type: "text",
+            localized: true,
+        },
+        {
+            name: "contentDescription",
+            label: "Content Description",
+            type: "textarea",
+            localized: true,
+        },
+        {
+            name: "flowLayout",
+            label: "Flow Layout",
+            type: "select",
+            required: true,
+            defaultValue: "left",
+            options: [
+                { label: "Flow left", value: "left" },
+                { label: "Flow right", value: "right" },
+            ],
+        },
+        {
+            name: "flow",
+            type: "group",
+            fields: [
+                {
+                    name: "trigger",
+                    type: "group",
+                    fields: [
+                        flowIconField(),
+                        {
+                            name: "name",
+                            type: "text",
+                            required: true,
+                            localized: true,
+                        },
+                    ],
+                },
+                {
+                    name: "items",
+                    label: "Flow items",
+                    type: "array",
+                    fields: [
+                        flowIconField(),
+                        {
+                            name: "color",
+                            type: "select",
+                            required: true,
+                            defaultValue: "brand",
+                            options: [
+                                { label: "Brand", value: "brand" },
+                                { label: "Yellow", value: "yellow" },
+                                { label: "Aqua", value: "aqua" },
+                                { label: "Blue", value: "blue" },
+                                { label: "Pink", value: "pink" },
+                            ],
+                        },
+                        {
+                            name: "outline",
+                            type: "checkbox",
+                            defaultValue: true,
+                        },
+                        {
+                            name: "segments",
+                            type: "array",
+                            required: true,
+                            minRows: 1,
+                            fields: [
+                                {
+                                    name: "type",
+                                    type: "select",
+                                    required: true,
+                                    defaultValue: "text",
+                                    options: [
+                                        { label: "Text", value: "text" },
+                                        { label: "Literal", value: "literal" },
+                                        { label: "Reference", value: "reference" },
+                                        { label: "Node", value: "node" },
+                                    ],
+                                },
+                                {
+                                    name: "value",
+                                    type: "text",
+                                    required: true,
+                                    localized: true,
+                                },
+                            ],
+                        },
+                    ],
+                },
+            ],
+        },
+        {
+            name: "showBorder",
+            label: "Show Border",
+            type: "checkbox",
+            defaultValue: false,
+        },
+    ],
+}

src/blocks/StatsBlock.ts

@@ -85,10 +85,10 @@ export const StatsBlock: Block = {
                     defaultValue: true,
                 },
                 {
-                    name: "showPlus",
-                    label: "Show plus",
-                    type: "checkbox",
-                    defaultValue: false,
+                    name: "suffix",
+                    label: "Suffix",
+                    type: "text",
+                    localized: true,
                 },
             ],
         },

src/collections/pages.ts

@@ -26,6 +26,7 @@ import { StandaloneBlock } from "@/blocks/StandaloneBlock"
 import { VideoBlock } from "@/blocks/VideoBlock"
 import { WideHeroBlock } from "@/blocks/WideHeroBlock"
 import { StatsBlock } from "@/blocks/StatsBlock"
+import { FlowExampleBlock } from "@/blocks/FlowExampleBlock"
 
 export const Pages: CollectionConfig = {
     slug: "pages",
@@ -101,6 +102,7 @@ export const Pages: CollectionConfig = {
                 WideHeroBlock,
                 ListFeatureSection,
                 StatsBlock,
+                FlowExampleBlock,
             ],
             required: false,
             localized: true,

src/components/PageBlockRenderer.tsx

@@ -20,6 +20,7 @@ import { StandaloneCardSection } from "./sections/StandaloneCardSection"
 import { VideoSection } from "./sections/VideoSection"
 import { WideHeroSection } from "./sections/WideHeroSection"
 import { StatsSection } from "./sections/StatsSection"
+import { FlowExampleSection } from "./sections/FlowExampleSection"
 import { ActionHeroSection } from "./sections/ActionHeroSection"
 import { ActionDetailSection } from "./sections/ActionDetailSection"
 import { ActionReferencesSection } from "./sections/ActionReferencesSection"
@@ -62,6 +63,7 @@ const pageBlockRenderers: Partial<Record<PageBlock["blockType"], BlockRenderer>>
     widehero: (block) => <WideHeroSection content={block as Extract<PageBlock, { blockType: "widehero" }>} />,
     listFeature: (block) => <ListFeatureSection content={block as Extract<PageBlock, { blockType: "listFeature" }>} />,
     stats: (block) => <StatsSection content={block as Extract<PageBlock, { blockType: "stats" }>} />,
+    flowExample: (block) => <FlowExampleSection content={block as Extract<PageBlock, { blockType: "flowExample" }>} />,
     actionHero: (block, options) =>
         options.action ? <ActionHeroSection action={options.action} locale={options.locale ?? "en"} content={block as Extract<PageBlock, { blockType: "actionHero" }>} /> : null,
     actionDetails: (block, options) => {

src/components/animations/NodesAnimation.tsx

@@ -1,71 +1,8 @@
 "use client"
 
-import { Card, Flex, Text } from "@code0-tech/pictor"
-import { IconNote, IconVariable } from "@tabler/icons-react"
+import { NodeDisplay, type NodeItem } from "@/components/nodes/NodeDisplay"
 import { useInView, useReducedMotion } from "motion/react"
 import { useEffect, useRef } from "react"
-import { StableBadge } from "../ui/StableBadge"
-
-type NodeSegmentType = "text" | "literal" | "reference" | "node"
-type NodeAccent = "brand" | "yellow" | "aqua" | "blue" | "pink"
-
-const ICON_COLOR_MAP: Record<NodeAccent, string> = {
-    brand: "var(--bg-brand)",
-    yellow: "var(--bg-yellow)",
-    aqua: "var(--bg-aqua)",
-    blue: "var(--bg-blue)",
-    pink: "var(--bg-pink)",
-}
-
-export interface NodeSegment {
-    type: NodeSegmentType
-    value: string
-}
-
-export interface NodeItem {
-    color: NodeAccent
-    segments: NodeSegment[]
-    outline: boolean
-}
-
-function displayMessage(segments: NodeSegment[]) {
-    return segments.map((segment, index) => {
-        switch (segment.type) {
-            case "literal":
-                return (
-                    <StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle" }} color={"secondary"}>
-                        <Text size={"sm"} style={{ color: "white" }}>
-                            {segment.value}
-                        </Text>
-                    </StableBadge>
-                )
-            case "reference":
-                return (
-                    <StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle" }} color={"warning"} border className="py-0">
-                        <IconVariable size={12} />
-                        <Text size={"sm"} style={{ color: "inherit" }}>
-                            {segment.value}
-                        </Text>
-                    </StableBadge>
-                )
-            case "node":
-                return (
-                    <StableBadge key={`${segment.type}-${segment.value}-${index}`} style={{ verticalAlign: "middle", textWrap: "nowrap" }} border>
-                        <IconNote size={12} className="text-white" />
-                        <Text size={"sm"} style={{ color: "white" }}>
-                            {segment.value}
-                        </Text>
-                    </StableBadge>
-                )
-            case "text":
-                return (
-                    <Text key={`${segment.type}-${index}`} size="sm" style={{ color: "inherit" }}>
-                        {segment.value}
-                    </Text>
-                )
-        }
-    })
-}
 
 function NodeRow({ nodes, direction, active }: { nodes: NodeItem[]; direction: "left" | "right"; active: boolean }) {
     const animationRef = useRef<HTMLDivElement>(null)
@@ -105,26 +42,12 @@ function NodeRow({ nodes, direction, active }: { nodes: NodeItem[]; direction: "
         >
             <div ref={listRef} className="flex items-start gap-4">
                 {nodes.map((node, index) => (
-                    <Card key={`${direction}-${node.color}-${index}`} paddingSize="xs" py="0.35" borderColor="info" color="primary" outline={node.outline}>
-                        <Flex align="center" style={{ gap: "0.7rem" }}>
-                            <IconNote color={ICON_COLOR_MAP[node.color]} size={16} className="shrink-0" />
-                            <Flex align="center" wrap="wrap" className="text-secondary!" style={{ gap: "0.35rem" }}>
-                                {displayMessage(node.segments)}
-                            </Flex>
-                        </Flex>
-                    </Card>
+                    <NodeDisplay key={`${direction}-${node.color}-${index}`} node={node} />
                 ))}
             </div>
             <div className="flex items-start gap-4" aria-hidden="true">
                 {nodes.map((node, index) => (
-                    <Card key={`${direction}-clone-${node.color}-${index}`} paddingSize="xs" py="0.35" borderColor="info" color="primary" outline={node.outline}>
-                        <Flex align="center" style={{ gap: "0.7rem" }}>
-                            <IconNote color={ICON_COLOR_MAP[node.color]} size={16} className="shrink-0" />
-                            <Flex align="center" wrap="wrap" className="text-secondary!" style={{ gap: "0.35rem" }}>
-                                {displayMessage(node.segments)}
-                            </Flex>
-                        </Flex>
-                    </Card>
+                    <NodeDisplay key={`${direction}-clone-${node.color}-${index}`} node={node} />
                 ))}
             </div>
         </div>

src/components/blog/TriggerMarkdownBlock.tsx

@@ -1,4 +1,5 @@
-import { NodesAnimation, type NodeItem, type NodeSegment } from "../animations/NodesAnimation"
+import { NodesAnimation } from "../animations/NodesAnimation"
+import type { NodeItem, NodeSegment } from "../nodes/NodeDisplay"
 
 interface TriggerMarkdownBlockProps {
     source: string