商品詳細

import { useState } from "react"
import { MinusIcon, PlusIcon, ShoppingCartIcon } from "lucide-react"
import { toast } from "sonner"
import { Button } from "./components/ui/button"
import { Toaster } from "./components/ui/sonner"

// 商品のデータ（本物では、サーバーから取ってくる）
const product = {
  name: "ワイヤレスイヤホン",
  category: "家電",
  price: 12800,
  rating: 4.5,
  reviews: 128,
  description: "ノイズを抑えて、音楽に集中できるイヤホン。1回の充電で8時間使えます。",
  // 写真の代わりの色（4枚）
  images: ["#0ea5e9", "#0284c7", "#7dd3fc", "#e0f2fe"],
  // 色ごとの在庫
  colors: [
    { name: "ブラック", stock: 5 },
    { name: "ホワイト", stock: 2 },
    { name: "ブルー", stock: 0 },
  ],
}

export default function App() {
  // ① 覚えておくもの（今は決まった値。ここを1つずつ useState にしていく）
  //const imageIndex = 0 // 大きく見せている写真の番号（0〜3）
  const [imageIndex, setImageIndex] = useState(0)
  const [color, setColor] = useState("ブラック") // 選んでいる色
  const [quantity, setQuantity] = useState(1) // 数量
  const [cartCount, setCartCount] = useState(0) // カートに入っている数
  const [colors, setColors] = useState(product.colors) // 色ごとの在庫（カートに入れたら減らす）

  // 選んでいる色の在庫の数
  const stock = colors.find((c) => c.name === color)?.stock ?? 0

  // 「カートに追加」を押したとき
  function addToCart() {
    // ここに：カートの数を、選んだ数量だけ増やす
    setCartCount(cartCount + quantity)
    setColors(colors.map((c) => (c.name === color ? { ...c, stock: c.stock - quantity } : c)))
    setQuantity(1)

    toast.success(`${product.name}（${color}）を ${quantity}個 カートに入れました`)
  }

  return (
    <div className="mx-auto my-6 w-full max-w-3xl rounded-xl border bg-card text-card-foreground">
      {/* 上の帯：お店の名前と、カートの数 */}
      <header className="flex items-center justify-between border-b px-6 py-3 text-sm">
        <span className="font-semibold">ショップ</span>
        {/* 右はし：カートの数と「カートを空にする」を並べる */}
        <div className="flex items-center gap-2">
          <span className="flex items-center gap-1.5 rounded-md bg-muted px-2.5 py-1">
            <ShoppingCartIcon className="size-4" />
            カート <b>{cartCount}</b>
          </span>
          <Button type="button" size="sm" variant="ghost" disabled={cartCount === 0} onClick={() => { setCartCount(0); setColors(product.colors) }}>
            カートを空にする
          </Button>
        </div>

      </header>

      <div className="grid gap-8 p-6 md:grid-cols-2">
        {/* 写真：大きな1枚と、小さな4枚 */}
        <div>
          <div className="aspect-square rounded-lg" style={{ backgroundColor: product.images[imageIndex] }} />
          <div className="mt-3 grid grid-cols-4 gap-2">
            {product.images.map((image, index) => (
              <button
                key={image}
                type="button"
                className={imageIndex === index ? "aspect-square rounded-md ring-2 ring-foreground ring-offset-2" : "aspect-square rounded-md"}
                style={{ backgroundColor: image }}
                onClick={() => setImageIndex(index)}

              />
            ))}
          </div>
        </div>

        {/* 商品の情報 */}
        <div>
          <p className="text-xs text-muted-foreground">{product.category}</p>
          <p className="mt-1 text-2xl font-semibold">{product.name}</p>
          <p className="mt-1 text-sm text-amber-500">
            ★ {product.rating} <span className="text-muted-foreground">（{product.reviews}件のレビュー）</span>
          </p>
          <p className="mt-4 text-2xl font-semibold">¥{product.price.toLocaleString()}</p>
          <p className="mt-4 text-sm leading-relaxed text-muted-foreground">{product.description}</p>

          {/* 色 */}
          <p className="mt-6 text-sm font-medium">色</p>
          <div className="mt-2 flex flex-wrap gap-2">
            {colors.map((option) => (
              <Button
                key={option.name}
                type="button"
                size="sm"
                variant={color === option.name ? "default" : "outline"}
                disabled={option.stock === 0}
                /* ここに：押したらこの色を選ぶ・選んでいる色を黒く・在庫がない色は押せない */
                onClick={() => {
                  setColor(option.name)
                  setQuantity(1)
                }}
              >
                {option.name}
              </Button>
            ))}
          </div>

          {/* 数量 */}
          <p className="mt-5 text-sm font-medium">数量</p>
          <div className="mt-2 flex items-center gap-3">
            <div className="inline-flex items-center rounded-md border">
              <Button type="button" size="icon" variant="ghost" aria-label="1つ減らす"
                disabled={quantity <= 1} onClick={() => setQuantity(quantity - 1)}
              >
                <MinusIcon />
              </Button>
              <span className="w-10 text-center text-sm">{quantity}</span>
              <Button type="button" size="icon" variant="ghost" aria-label="1つ増やす"
                disabled={quantity >= stock} onClick={() => setQuantity(quantity + 1)}
              >
                <PlusIcon />
              </Button>
            </div>
            <span className="text-xs text-muted-foreground">残り {stock}点</span>
          </div>

          <Button type="button" className="mt-6 w-full" disabled={stock === 0} onClick={addToCart}>
            カートに追加
          </Button>
        </div>
      </div>

      <Toaster position="bottom-right" />
    </div>
  )
}