Add omikuji.

Author: torinoko

app/omikuji/page.tsx

@@ -0,0 +1,9 @@
+import Omikuji from '../../components/Omikuji';
+
+export default function OmikujiPage() {
+  return (
+    <>
+      <Omikuji />
+    </>
+  );
+}

components/Nav.tsx

@@ -1,11 +1,14 @@
+import Link from "next/link";
+
 export default function Nav() {
   return (
     <nav className="bg-main shadow-md fixed w-full top-0 z-50">
       <div className="container mx-auto px-6 py-4 flex justify-between items-center">
         <a href="/" className="text-2xl font-bold text-white hover:text-slate-200 transition duration-300">かまずにまるのみどっとこむ</a>
         <div className="space-x-4 text-white ">
-            <a href="#profile" className="hover:hover-text-main-light transition duration-300">Profile</a>
-            <a href="#portfolio" className="hover:hover-text-main-light transition duration-300">Portfolio</a>
+            <a href="/#profile" className="hover:hover-text-main-light transition duration-300">Profile</a>
+            <a href="/#portfolio" className="hover:hover-text-main-light transition duration-300">Portfolio</a>
+            <a href="/omikuji">Omijiku</a>
         </div>
       </div>
     </nav>

components/Omikuji.tsx

@@ -1,30 +1,30 @@
- 'use client';
+'use client';
 
-import { messages } from '../data/omikuji';
 import { useState } from 'react';
+import { messages, OmikujiResult } from '../data/omikuji';
 
-export default function Nav() {
-  const [result, setResult] = useState<string | null>(null);
+export default function Omikuji() {
+  const [result, setResult] = useState<OmikujiResult | null>(null);
 
   const drawOmikuji = () => {
-    const random = messages[Math.floor(Math.random() * messages.length)];
-    setResult(random);
+    const rand = messages[Math.floor(Math.random() * messages.length)];
+    setResult(rand);
   };
   return (
-     <main className="flex flex-col items-center justify-center bg-white">
-      <h1 className="text-3xl font-bold text-main mb-8">おみくじ</h1>
-      <button
-        onClick={drawOmikuji}
-        className="px-6 py-3 bg-main text-white rounded-lg shadow hover:cursor-pointer transition"
-      >
-        おみくじを引く
-      </button>
-
-      {result && (
-        <div className="mt-10">
-          <p className="text-main">🎉 {result} 🎉 </p>
-        </div>
-      )}
+     <main className="flex flex-col items-center justify-center mt-40 bg-white">
+        <h1 className="text-3xl font-bold text-main mb-8">おみくじ</h1>
+        {result ? (
+            <div className="flex flex-col items-center">
+                <p className="text-main text-xl">♡ {result.message} ♡</p>
+                <img src={result.image} alt={result.message} className="w-1/3 mt-8" />
+            </div>
+        ) : (
+            <button
+                onClick={drawOmikuji}
+                className="px-6 py-3 bg-main text-white rounded-lg shadow hover:cursor-pointer transition">
+                おみくじを引く
+            </button>
+        )}
     </main>
   )
 }

data/omikuji.ts

@@ -1,42 +1,21 @@
-import { contents } from "./contents"
+export type OmikujiResult = {
+    message: string;
+    image: string;
+};
 
-export const messages = [
-  // 日本語
-  "大吉！今日はいい日になりそう！",
-  // 英語
-  "Excellent luck! Today is going to be a good day!",
-  // フランス語
-  "Très chanceux ! Aujourd'hui sera une bonne journée !",
-  // ドイツ語
-  "Großes Glück! Heute wird ein guter Tag!",
-  // スペイン語
-  "¡Gran suerte! ¡Hoy será un buen día!",
-  // イタリア語
-  "Grande fortuna! Oggi sarà una bella giornata!",
-  // 中国語（簡体）
-  "大吉！今天是个好日子！",
-  // 中国語（繁体）
-  "大吉！今天會是美好的一天！",
-  // 韓国語
-  "대길! 오늘은 좋은 하루가 될 거예요!",
-  // アラビア語
-  "حظ عظيم! سيكون اليوم يوماً رائعاً!",
-  // ヒンディー語
-  "बहुत शुभ! आज का दिन अच्छा होगा!",
-  // タイ語
-  "โชคดีมาก! วันนี้เป็นวันที่ดีแน่นอน!",
-  // インドネシア語
-  "Keberuntungan besar! Hari ini akan menjadi hari yang baik!",
-  // ベトナム語
-  "May mắn lớn! Hôm nay sẽ là một ngày tốt lành!",
-  // ポルトガル語
-  "Grande sorte! Hoje será um bom dia!",
-  // スウェーデン語
-  "Stor tur! Idag blir en bra dag!",
-  // トルコ語
-  "Büyük şans! Bugün güzel bir gün olacak!",
-  // フィリピン語（タガログ語）
-  "Napakaswerte! Magiging maganda ang araw na ito!",
-  // ウクライナ語
-  "Велика удача! Сьогодні буде гарний день!"
-];
+export const messages: OmikujiResult[] = [
+  { message: '散歩中ににゃんこに会えるかも', image: '/images/omikuji/nekoniaeru.png' },
+  { message: '散歩中のわんこと触れ合えるチャンス', image: '/images/omikuji/sanpowanko.png' },
+  { message: 'かわいい小鳥を見かける', image: '/images/omikuji/kawaiikotori.png' },
+  { message: 'きれいな玉虫を発見できる可能性が3％上がる', image: '/images/omikuji/tamamushi.png' },
+  { message: 'ニホントカゲのこどものしっぽは青くてきらきら', image: '/images/omikuji/nihontokage.png' },
+  { message: 'みのむしと目があう', image: '/images/omikuji/minomushi.png' },
+  { message: 'お花がきれいだね', image: '/images/omikuji/ohanakirei.png' },
+  { message: '大きいわんこ', image: '/images/omikuji/ookiiwanko.png' },
+  { message: '食べたおやつがおいしい', image: '/images/omikuji/oishiioyatsu.png' },
+  { message: 'おいしいごはん！', image: '/images/omikuji/oishiigohan.png' },
+  { message: 'ちょっとかしこさが上がるかも？', image: '/images/omikuji/kashikoi.png' },
+  { message: '周りの人たちにやさしくしたいね〜', image: '/images/omikuji/yasashisa.png' },
+  { message: 'けんかしてもなかなおり', image: '/images/omikuji/nakanaori.png' },
+  { message: 'ふだん見かけない鳥さんと遭遇しそう', image: '/images/omikuji/mezurashiitori.png' },
+]