Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

page3 changed routing #5

Merged
merged 1 commit into from
Feb 4, 2024
Merged

page3 changed routing #5

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion frontend/src/components/App.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,34 @@
import React from 'react'
import Page1 from './Page1'
import { RouterProvider, createBrowserRouter } from 'react-router-dom'
import Page2 from './Page2'
import Page3 from './Page3'
import Grid from './parts/Grid'
const App = () => {
const appRouter=createBrowserRouter([
{
path:"/",
element:<Page1/>,
children:[{
path:"/",
element :<Grid/>
},
{
path:"/card",
element:<div className='col-span-3'>
<Page2/>
</div>
}]
},
{
path:"/rent",
element :<Page3/>
}

])
return (
<div>
<Page1/>
<RouterProvider router={appRouter}/>
</div>
)
}
Expand Down
73 changes: 10 additions & 63 deletions frontend/src/components/Page1.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,64 +1,16 @@
import React from 'react'
import SideBar from './parts/SideBar'
import Cards from './parts/Cards'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import { BrowserRouter, Route, Routes,Link, Outlet } from 'react-router-dom'
import Page3 from './Page3'
import Page2 from './Page2'
const Page1 = () => {

const Grid=()=>{
return (
/* Main Content Grid */
<div className="col-span-3 p-2 overflow-hidden grid grid-cols-3 gap-4">
{/* Card 1 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 2 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 3 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 4 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 2 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 3 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 4 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>
</div>
)
}
return (

<div>

<div className='flex py-[10px] px-[20px] bg-stone-300/10'>
<div className='w-[40%] m-auto'>
<form onSubmit={(e)=>{
Expand All @@ -76,10 +28,11 @@ const Page1 = () => {
</div>
</form>
</div>

<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800">Sign up</button>
<button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Rent</button>
<Link to="/rent"><button type="button" class="text-white bg-gray-800 hover:bg-gray-900 focus:outline-none focus:ring-4 focus:ring-gray-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-gray-800 dark:hover:bg-gray-700 dark:focus:ring-gray-700 dark:border-gray-700">Rent</button></Link>
</div>
<BrowserRouter>

<div className="grid grid-cols-4 h-auto max-w-[80vw] ">
{/* Sidebar */}

Expand All @@ -88,18 +41,12 @@ const Page1 = () => {
<SideBar/>
</div>

<Routes>
<Route path='/' element={<Grid/>} />
<Route path='/card' element={
<div className='col-span-3'>
<Page2/>
</div>
} />
</Routes>
<Outlet/>

</div>
</BrowserRouter>

</div>

)
}

Expand Down
9 changes: 9 additions & 0 deletions frontend/src/components/Page3.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import React from 'react'

const Page3 = () => {
return (
<div>Page3</div>
)
}

export default Page3
56 changes: 56 additions & 0 deletions frontend/src/components/parts/Grid.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import React from "react"
import Cards from "./Cards";
const Grid=()=>{
return (

/* Main Content Grid */
<div className="col-span-3 p-2 overflow-hidden grid grid-cols-3 gap-4">
{/* Card 1 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 2 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 3 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 4 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 2 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 3 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>

{/* Card 4 */}
<div className="flex items-stretch ">
{/* Card Content */}
<Cards/>
</div>
</div>
)
}
export default Grid;