Skip to content

Commit

Permalink
Showing 10 changed files with 164 additions and 42 deletions.
59 changes: 29 additions & 30 deletions apps/react/src/app/app.tsx
Original file line number Diff line number Diff line change
@@ -1,39 +1,38 @@
import './app.scss';

import { Link, Route } from 'react-router-dom';
import { Route } from 'react-router-dom';
import Nav from './nav/nav';
import LoginPage from './login-page/login-page';
import ProductsPage from './products-page/products-page';

export function App() {
return (
<div className="app">
<div role="navigation">
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/page-2">Page </Link>
</li>
</ul>
<div>
<Nav />

<div className="container py-4">
<Route
path="/"
exact
render={() => (
<h1>Home</h1>
)}
/>

<Route
path="/products"
exact
component={ProductsPage}
/>

<Route
path="/login"
exact
component={LoginPage}
/>

</div>
<Route
path="/"
exact
render={() => (
<div>
This is the generated root route.{' '}
<Link to="/page-2">Click here for page 2.</Link>
</div>
)}
/>
<Route
path="/page-2"
exact
render={() => (
<div>
<Link to="/">Click here to go back to root page.</Link>
</div>
)}
/>

</div>
);
}
Empty file.
26 changes: 26 additions & 0 deletions apps/react/src/app/login-page/login-page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import './login-page.scss';

export function LoginPage() {
return (
<>
<h1 className="text-2xl mb-2">Login</h1>

<form>
<div className="mb-3">
<label htmlFor="email" className="form-label">Email address</label>
<input type="email" className="form-control" id="email" />
</div>

<div className="mb-3">
<label htmlFor="password" className="form-label">Password</label>
<input type="password" className="form-control" id="password" />
</div>

<button type="submit" className="btn btn-primary">Submit</button>
</form>
</>

);
}

export default LoginPage;
Empty file added apps/react/src/app/nav/nav.scss
Empty file.
35 changes: 35 additions & 0 deletions apps/react/src/app/nav/nav.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import { Link } from 'react-router-dom';
import './nav.scss';

export function Nav() {
return (
<nav className="navbar navbar-expand-lg navbar-light bg-light">
<div className="container-fluid">

<Link className="navbar-brand" to="/">Elf</Link>

<button className="navbar-toggler" type="button">
<span className="navbar-toggler-icon"></span>
</button>

<div className="collapse navbar-collapse">
<ul className="navbar-nav me-auto mb-2 mb-lg-0">
<li className="nav-item">
<Link className="nav-link" to="/">Home</Link>
</li>

<li className="nav-item">
<Link className="nav-link" to="/products">Products</Link>
</li>

<li className="nav-item">
<Link className="nav-link" to="/login">Login</Link>
</li>
</ul>
</div>
</div>
</nav>
);
}

export default Nav;
Empty file.
27 changes: 27 additions & 0 deletions apps/react/src/app/products-page/product/product.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import './product.scss';


export interface ProductProps {
product: Product;
}

export interface Product {
id: number;
title: string;
description: string;
}

export function Product({ product: { title, description, id } }: ProductProps) {
return (
<div className="card">
<div className="card-body">
<h5 className="card-title">{title}</h5>
<h6 className="card-subtitle mb-2 text-muted">{description}</h6>
{/* <a href="#" className="card-link">Card link</a> */}
{/* <a href="#" className="card-link">Another link</a> */}
</div>
</div>
);
}

export default Product;
Empty file.
28 changes: 28 additions & 0 deletions apps/react/src/app/products-page/products-page.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import Product from './product/product';
import './products-page.scss';

const products = Array.from({ length: 10 }).map((_, i) => ({
id: i,
title: `Product ${i}`,
description: 'lorem ipsum'
}))

export function ProductsPage() {
return (
<>
<h1 className="text-2xl mb-2">Products</h1>

<section className="flex flex-wrap gap-2">
{products.map(product => (
<div className="w-3/12">
<Product product={product} key={product.id} />
</div>
))}

</section>

</>
);
}

export default ProductsPage;
31 changes: 19 additions & 12 deletions apps/react/src/index.html
Original file line number Diff line number Diff line change
@@ -1,14 +1,21 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React</title>
<base href="/" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
</head>
<body>
<div id="root"></div>
</body>
</html>

<head>
<meta charset="utf-8" />
<title>React</title>
<base href="/" />

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-F3w7mX95PdgyTmZZMECAngseQB83DfGTowi0iMjiWaeVhAn4FJkqJByhZMI3AhiU" crossorigin="anonymous">
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">

</head>

<body>
<div id="root"></div>
</body>

</html>

0 comments on commit 42cbca7

Please sign in to comment.