Merge pull request #101 from traP-jp/client/feat/stampPicker

feat: StampPickerコンポーネントを修正
traP-jp · Jan 25, 2025 · 050b586 · 050b586
2 parents c0aeea2 + 329933f
commit 050b586
Showing 1 changed file with 33 additions and 3 deletions.
diff --git a/client/src/components/StampPicker.tsx b/client/src/components/StampPicker.tsx
@@ -1,20 +1,50 @@
 import { SmileOutlined } from "@ant-design/icons";
 import { Button, Popover } from "antd";
 import React, { useState } from "react";
+import Reaction, { ReactionAssets } from "../model/reactions";
 
 export const StampPicker: React.FC = () => {
   const [isPopoverOpen, setPopoverOpen] = useState(false);
-  const icons = Array(20).fill(<SmileOutlined />);
+  const reactions: Reaction[] = Array(8)
+    .fill([
+      {
+        id: "1",
+        userId: "1",
+        position: { x: 0, y: 0 },
+        kind: "iine",
+        createdAt: new Date(),
+        expiresAt: new Date(),
+      },
+      {
+        id: "2",
+        userId: "2",
+        position: { x: 0, y: 0 },
+        kind: "kusa",
+        createdAt: new Date(),
+        expiresAt: new Date(),
+      },
+      {
+        id: "3",
+        userId: "3",
+        position: { x: 0, y: 0 },
+        kind: "pro",
+        createdAt: new Date(),
+        expiresAt: new Date(),
+      },
+    ])
+    .flat();
 
   return (
     <Popover
       content={
         <div className="grid grid-cols-4 gap-2">
-          {icons.map((icon, index) => (
+          {reactions.map((reaction, index) => (
             <Button
               key={index}
               type="text"
-              icon={icon}
+              icon={
+                <img src={ReactionAssets[reaction.kind]} alt={reaction.kind} />
+              }
               className="hover:bg-background-secondary"
             />
           ))}