From 8d57f76a863c597657782d9bbc83c7998a19501a Mon Sep 17 00:00:00 2001
From: Khang Duy LAI <laiduy98@gmail.com>
Date: Wed, 11 Mar 2026 14:42:52 +0100
Subject: [PATCH] feat: add RoastGallery component with JSON config
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Create RoastGallery component that loads photos from roasts.json
- Responsive grid layout (2/3/4 columns based on screen size)
- Vietnamese section title "Bộ Sưu Tập Huyền Thoại"
---
 public/roasts.json              |  4 ++++
 src/components/RoastGallery.jsx | 30 ++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+)
 create mode 100644 public/roasts.json
 create mode 100644 src/components/RoastGallery.jsx

diff --git a/public/roasts.json b/public/roasts.json
new file mode 100644
index 0000000..812a388
--- /dev/null
+++ b/public/roasts.json
@@ -0,0 +1,4 @@
+[
+  { "image": "placeholder-1.jpg", "caption": "Thêm ảnh vào thư mục public/images/ nhé! 😄" },
+  { "image": "placeholder-2.jpg", "caption": "Chỉnh caption trong public/roasts.json" }
+]
diff --git a/src/components/RoastGallery.jsx b/src/components/RoastGallery.jsx
new file mode 100644
index 0000000..9905f7f
--- /dev/null
+++ b/src/components/RoastGallery.jsx
@@ -0,0 +1,30 @@
+import { useState, useEffect } from 'react'
+import RoastCard from './RoastCard'
+
+export default function RoastGallery() {
+  const [roasts, setRoasts] = useState([])
+
+  useEffect(() => {
+    fetch('/roasts.json')
+      .then((res) => res.json())
+      .then((data) => setRoasts(data))
+      .catch((err) => console.error('Failed to load roasts:', err))
+  }, [])
+
+  return (
+    <section className="max-w-7xl mx-auto px-4 py-12">
+      <h2 className="text-3xl font-bold text-center mb-8 text-gray-800">
+        📸 Bộ Sưu Tập "Huyền Thoại"
+      </h2>
+      <div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 md:gap-6">
+        {roasts.map((roast, index) => (
+          <RoastCard
+            key={index}
+            image={roast.image}
+            caption={roast.caption}
+          />
+        ))}
+      </div>
+    </section>
+  )
+}