Something went wrong. Try again.
This repository has no description
Something went wrong. Try again.
1.9 kB · 65 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566"use client";
import { useState } from "react";import { useRouter } from "next/navigation";
const EMOJIS = ["👍", "👎", "💙", "🔥", "😆", "😢", "🤔", "😴", "🎉", "🤩", "😭", "🥳", "😤", "💀", "✨", "👀", "🙏", "📚", "💻", "🍕", "🌴"];
interface StatusPickerProps { currentStatus?: string | null;}
export function StatusPicker({ currentStatus }: StatusPickerProps) { const router = useRouter(); const [selected, setSelected] = useState<string | null>(currentStatus ?? null); const [loading, setLoading] = useState(false);
async function handleSelect(emoji: string) { setLoading(true); setSelected(emoji);
try { const res = await fetch("/api/status", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ status: emoji }), });
if (!res.ok) { throw new Error("Failed to update status"); }
router.refresh(); } catch (err) { console.error("Failed to update status:", err); setSelected(currentStatus ?? null); } finally { setLoading(false); } }
return ( <div> <p className="text-sm text-zinc-500 dark:text-zinc-400 mb-3"> Set your status </p> <div className="flex flex-wrap gap-2"> {EMOJIS.map((emoji) => ( <button key={emoji} onClick={() => handleSelect(emoji)} disabled={loading} className={`text-2xl p-2 rounded-lg transition-all ${selected === emoji ? "bg-blue-100 dark:bg-blue-900 ring-2 ring-blue-500" : "hover:bg-zinc-100 dark:hover:bg-zinc-800" } disabled:opacity-50 disabled:cursor-not-allowed`} > {emoji} </button> ))} </div> </div> );}