App.tsx

// import { useState } from "react";
import "./App.css";

function App() {
    //build Home, sitting room, dining room, kitchen
    return (
        <>
            <Home />
        </>
    );
}

function Home() {
    return (
        <>
            <SittingRoom />
            <DiningRoom />
            <Kitchen />
        </>
    );
}

function Table({
    size,
    type = "glass",
}: {
    size: "small" | "medium" | "large";
    type?: "glass" | "metal" | "wood";
}) {
    // const [size, setSize] = useState<>("large");
    // const [type, setType] = useState<>("glass");

    return (
        <>
            This is a {size} table made of {type}{" "}
        </>
    );
}

const BookShelfData = {
    shelves: {
        SittingRoomShelves: {
            number: "1",
            sections: [
                {
                    name: "Lifestyle",
                    books: [
                        { title: "Atomic Habit", author: "James Clear" },
                        { title: "The Power of Now", author: " Eckhart Tolle" },
                    ],
                },
                {
                    name: "Technology",
                    books: [
                        { title: "Steve Jobs", author: "Walter Isaacson" },
                        { title: "The Ethical Algorithm", author: "Aaron Roth" },
                    ],
                },
            ],
        },
        DiningRoomShelves: {
            number: "1",
            sections: [
                {
                    name: "Fiction",
                    books: [
                        { title: "Atomic Habit", author: "James Clear" },
                        { title: "The Power of Now", author: " Eckhart Tolle" },
                    ],
                },
                {
                    name: "Magazines",
                    books: [
                        { title: "Forbes", author: "Walter Isaacson" },
                        { title: "National Geographic", author: "Aaron Roth" },
                    ],
                },
            ],
        },
        KitchenShelves: {
            number: "1",
            sections: [
                {
                    name: "Cooking",
                    books: [
                        { title: "Atomic Habit", author: "James Clear" },
                        { title: "The Power of Now", author: " Eckhart Tolle" },
                    ],
                },
                {
                    name: "Baking",
                    books: [
                        { title: "Forbes", author: "Walter Isaacson" },
                        { title: "National Geographic", author: "Aaron Roth" },
                    ],
                },
            ],
        },
    }
}

function SittingRoom() {
    return (
        <div>
            <h2>This is the Sitting Room</h2>
            <Table size="large" type="metal" />
            <Bookshelf shelves={[BookShelfData.shelves.SittingRoomShelves]} />
        </div>
    );
}

function DiningRoom() {
    return (
        <div>
            <h2>This is the Dining Room</h2>
            <Table size="medium" />
            <Bookshelf shelves={[BookShelfData.shelves.DiningRoomShelves]} />
        </div>
    );
}

function Kitchen() {
    return (
        <div>
            <h2>This is the Kitchen</h2>
            <Table size="small" type="wood" />
        </div>
    );
}

// function () {
//   return <></>
// }
interface IBook {
    title: string;
    author: string;
}

interface ISection {
    name: string;
    books: IBook[];
}

interface IBookShelf {
    number: string;
    sections: ISection[];
}

function Book({ title, author }: IBook) {
    return (
        <div className="p-2 border rounded bg-white shadow-sm">
            <p className="font-medium">{title}</p>
            <p className="text-sm text-gray-600">by {author}</p>
        </div>
    );
}

function Section({ name, books }: ISection) {
    return (
        <div className="mb-4">
            <h3 className="text-lg font-semibold mb-2">{name}</h3>
            <div className="grid grid-cols-2 gap-2">
                {books.map((book, idx) => (
                    <Book key={idx} {...book} />
                ))}
            </div>
        </div>
    );
}

function Shelf({ number, sections }: IBookShelf) {
    return (
        <div className="p-4 bg-gray-100 rounded-lg mb-6 shadow">
            <h2 className="text-xl font-bold mb-4">Shelf {number}</h2>
            {sections.map((section, idx) => (
                <Section key={idx} {...section} />
            ))}
        </div>
    );
}

function Bookshelf({ shelves }: { shelves: IBookShelf[] }) {
    return (
        <div className="p-6 border-2 border-gray-300 rounded-xl bg-gray-50">
            <h1 className="text-2xl font-bold mb-6">Bookshelf</h1>
            {shelves.map((shelf, idx) => (
                <Shelf key={idx} {...shelf} />
            ))}
        </div>
    );
}

export default App;