Last active
September 1, 2025 20:32
-
-
Save jvcByte/5fa92f3568bc69ea12a8bc90f3d8194a to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // 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; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment