Xへのポストボタンを追加

hmatsu47 · Jun 29, 2024 · 9a2bc17 · 9a2bc17
1 parent bcf0b17
commit 9a2bc17
Show file tree

Hide file tree

Showing 6 changed files with 32 additions and 15 deletions.
diff --git a/src/app/DisplayComponent.tsx b/src/app/DisplayComponent.tsx
@@ -17,6 +17,12 @@ const DisplayComponent: React.FC<DisplayComponentProps> = ({
   talkId,
   handleCheckWinning,
 }) => {
+  const handlePostToX = () => {
+    const text = `大吉祥寺.pm #ミニ句会 で投句しました！\n${haiku}\n（詠み人：${haijinName}／投句番号：${talkId}）\n#kichijojipm`;
+    const url = `https://x.com/intent/post?text=${encodeURIComponent(text)}`;
+    window.open(url, "_blank");
+  };
+
   return (
     <Table className="w-full text-left border-collapse text-xs-responsive">
       <TableBody>
@@ -32,11 +38,21 @@ const DisplayComponent: React.FC<DisplayComponentProps> = ({
           <TableCell className="py-2 px-4 border-b">投句番号:</TableCell>
           <TableCell className="py-2 px-4 border-b">{talkId}</TableCell>
         </TableRow>
+        <TableRow>
+          <TableCell colSpan={2} className="p-2 text-center">
+            <Button
+              onClick={handlePostToX}
+              className="bg-black hover:bg-gray-500 text-xs-responsive text-white"
+            >
+              X（旧Twitter）にポスト
+            </Button>
+          </TableCell>
+        </TableRow>
         <TableRow>
           <TableCell colSpan={2} className="p-2 text-center">
             <Button
               onClick={handleCheckWinning}
-              className="bg-orange-500 text-white hover:bg-orange-300 text-xs-responsive"
+              className="bg-orange-500 hover:bg-orange-300 text-xs-responsive text-white hover:text-black"
             >
               当選結果を確認
             </Button>

diff --git a/src/app/FormComponent.tsx b/src/app/FormComponent.tsx
@@ -145,7 +145,7 @@ const FormComponent: React.FC<FormComponentProps> = ({
               <Button
                 type="submit"
                 disabled={isPending}
-                className="bg-orange-500 text-white hover:bg-orange-300 text-xs-responsive"
+                className="bg-orange-500 hover:bg-orange-300 text-xs-responsive text-white hover:text-black"
               >
                 投句
               </Button>

diff --git a/src/app/list/HaikuTable.tsx b/src/app/list/HaikuTable.tsx
@@ -59,8 +59,10 @@ export function HaikuTable({
               <div className="flex items-center justify-end">
                 <Button
                   onClick={() => handleToggle(haiku.talk_id)}
-                  className={`text-white hover:bg-orange-300 text-xs-responsive mr-2 ${
-                    haiku.hand_over === 1 ? "bg-orange-300" : "bg-orange-500"
+                  className={`text-xs-responsive mr-2 ${
+                    haiku.hand_over === 1
+                      ? "bg-orange-300 hover:bg-orange-500 text-black hover:text-white"
+                      : "bg-orange-500 hover:bg-orange-300 text-white hover:text-black"
                   }`}
                 >
                   {haiku.hand_over === 0 ? "未" : "済"}

diff --git a/src/app/list/ListClient.tsx b/src/app/list/ListClient.tsx
@@ -53,7 +53,7 @@ export default function ListClient({
       } else if (filter === "handed") {
         return haiku.hand_over > 0;
       } else if (filter === "winning") {
-        return haiku.winning && haiku.winning.startsWith("当選");
+        return haiku.winning;
       }
       return true; // 'all' or any other value
     });
@@ -82,14 +82,14 @@ export default function ListClient({
             <div className="flex justify-start mb-4 space-x-2">
               <Button
                 onClick={handleToggleTalkOn}
-                className="bg-orange-500 text-white hover:bg-orange-300 text-xs-responsive"
+                className="bg-orange-500 hover:bg-orange-300 text-xs-responsive text-white hover:text-black"
               >
                 {talkOn ? "投句終了" : "投句再開"}
               </Button>
               <Button
                 onClick={handlePerformDraw}
                 disabled={talkOn}
-                className="bg-orange-500 text-white hover:bg-orange-300 text-xs-responsive"
+                className="bg-orange-500 hover:bg-orange-300 text-xs-responsive text-white hover:text-black"
               >
                 {winFin ? "再抽選" : "抽選"}
               </Button>

diff --git a/src/app/page.tsx b/src/app/page.tsx
@@ -1,7 +1,6 @@
 "use client";
 
 import { useState, useEffect, useTransition, Suspense } from "react";
-import { useRouter } from "next/navigation";
 import { addHaiku, checkWinning } from "../lib/actions";
 import FormComponent from "./FormComponent";
 import DisplayComponent from "./DisplayComponent";
@@ -36,7 +35,7 @@ export default function Page() {
       setMessage([
         "投句ありがとうございます！",
         "当選発表をお待ちください！",
-        "（17時台後半）",
+        "（17時台後半LTにて）",
       ]);
     }
 
@@ -83,10 +82,10 @@ export default function Page() {
   };
 
   return (
-    <div className="max-w-4xl mx-auto p-4 min-w-[360px]">
+    <div className="mx-auto p-4 min-w-[360px] max-w-[480px]">
       <Card>
         <CardHeader className="text-center text-2xl font-bold text-gray-800 text-xs-responsive">
-          投句箱
+          ミニ句会 投句箱🗳️
         </CardHeader>
         <CardContent>
           <Suspense fallback={<LoadingSpinner />}>

diff --git a/src/lib/actions.ts b/src/lib/actions.ts
@@ -116,7 +116,7 @@ export async function addHaiku(
         result: [
           "投句ありがとうございます！",
           "当選発表をお待ちください！",
-          "（17時台後半）",
+          "（17時台後半LTにて）",
         ],
         token: result.rows[0].token,
       };
@@ -126,9 +126,9 @@ export async function addHaiku(
         result: [
           "投句ありがとうございます！",
           `先着${goodsCount}名様にプレゼントがあります！`,
-          "休憩時間中お早めに受付まで",
+          "休憩時間中お早めに受付まで！",
           "※この画面を見せてください",
-          "（17:00締切／別途抽選あり）",
+          "（17:00締切／LTで別途抽選あり）",
         ],
         token: result.rows[0].token,
       };
@@ -162,7 +162,7 @@ export async function checkWinning(
     return [
       "まだ抽選が行われていません",
       "当選発表をお待ちください！",
-      "（17時台後半）",
+      "（17時台後半LTにて）",
     ];
   }