Merge pull request #351 from MovieReviewComment/feature/issue-302/imp…

…lement-block-type-actions

[#302] Implement BlockTypeActions

ui/src/components/review/client/block-type-actions.tsx

@@ -0,0 +1,59 @@
+'use client';
+
+import type { LexicalEditor } from 'lexical';
+import Image from 'next/image';
+
+import { IconButton } from '@/components/common/client/icon-button';
+
+import { useBlockTypeActions } from '@/hooks/editor/use-block-type-actions';
+
+export function BlockTypeActions({ editor }: { editor: LexicalEditor | undefined | null }) {
+  const {
+    blockType,
+    formatParagraph,
+    formatQuote,
+    formatHeading,
+    formatBulletList,
+    formatNumberedList,
+  } = useBlockTypeActions({ editor });
+
+  return (
+    <div className="flex items-center space-x-2">
+      <IconButton
+        selected={blockType === 'paragraph'}
+        onClick={formatParagraph}
+        icon={<Image src="/icons/text-paragraph.svg" alt="Paragraph" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'quote'}
+        onClick={formatQuote}
+        icon={<Image src="/icons/chat-square-quote.svg" alt="Quote" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'h1'}
+        onClick={() => formatHeading('h1')}
+        icon={<Image src="/icons/type-h1.svg" alt="Heading 1" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'h2'}
+        onClick={() => formatHeading('h2')}
+        icon={<Image src="/icons/type-h2.svg" alt="Heading 2" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'h3'}
+        onClick={() => formatHeading('h3')}
+        icon={<Image src="/icons/type-h3.svg" alt="Heading 3" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'bullet'}
+        onClick={formatBulletList}
+        icon={<Image src="/icons/list-ul.svg" alt="Bullet List" width={20} height={20} />}
+      />
+      <IconButton
+        selected={blockType === 'number'}
+        onClick={formatNumberedList}
+        icon={<Image src="/icons/list-ol.svg" alt="Numbered List" width={20} height={20} />}
+      />
+    </div>
+  );
+}