Skip to content

R
routing_v5_v6
Commit d8283adb authored by Pavel Mishakov's avatar Pavel Mishakov
Browse files
Options

61 done

parents
Show whitespace changes
Inline Side-by-side
Showing with 1058 additions and 0 deletions
.gitignore 0 → 100644
View file @ d8283adb
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
lerna-debug.log*
node_modules
dist
dist-ssr
*.local
# Editor directories and files
.vscode/*
!.vscode/extensions.json
.idea
.DS_Store
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?
README.md 0 → 100644
View file @ d8283adb
# React + TypeScript + Vite
This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
Currently, two official plugins are available:
- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
## Expanding the ESLint configuration
If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
```js
export default tseslint.config({
extends: [
// Remove ...tseslint.configs.recommended and replace with this
...tseslint.configs.recommendedTypeChecked,
// Alternatively, use this for stricter rules
...tseslint.configs.strictTypeChecked,
// Optionally, add this for stylistic rules
...tseslint.configs.stylisticTypeChecked,
],
languageOptions: {
// other options...
parserOptions: {
project: ['./tsconfig.node.json', './tsconfig.app.json'],
tsconfigRootDir: import.meta.dirname,
},
},
})
```
You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
```js
// eslint.config.js
import reactX from 'eslint-plugin-react-x'
import reactDom from 'eslint-plugin-react-dom'
export default tseslint.config({
plugins: {
// Add the react-x and react-dom plugins
'react-x': reactX,
'react-dom': reactDom,
},
rules: {
// other rules...
// Enable its recommended typescript rules
...reactX.configs['recommended-typescript'].rules,
...reactDom.configs.recommended.rules,
},
})
```
eslint.config.js 0 → 100644
View file @ d8283adb
import js from '@eslint/js'
import globals from 'globals'
import reactHooks from 'eslint-plugin-react-hooks'
import reactRefresh from 'eslint-plugin-react-refresh'
import tseslint from 'typescript-eslint'
export default tseslint.config(
{ ignores: ['dist'] },
{
extends: [js.configs.recommended, ...tseslint.configs.recommended],
files: ['**/*.{ts,tsx}'],
languageOptions: {
ecmaVersion: 2020,
globals: globals.browser,
},
plugins: {
'react-hooks': reactHooks,
'react-refresh': reactRefresh,
},
rules: {
...reactHooks.configs.recommended.rules,
'react-refresh/only-export-components': [
'warn',
{ allowConstantExport: true },
],
},
},
)
index.html 0 → 100644
View file @ d8283adb
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
package-lock.json 0 → 100644
View file @ d8283adb
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json 0 → 100644
View file @ d8283adb
{
"name": "classwork",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc -b && vite build",
"lint": "eslint .",
"preview": "vite preview"
},
"dependencies": {
"react": "^19.1.0",
"react-dom": "^19.1.0",
"react-router": "^7.6.1",
"react-router-dom": "^7.6.1"
},
"devDependencies": {
"@eslint/js": "^9.25.0",
"@types/react": "^19.1.2",
"@types/react-dom": "^19.1.2",
"@vitejs/plugin-react": "^4.4.1",
"eslint": "^9.25.0",
"eslint-plugin-react-hooks": "^5.2.0",
"eslint-plugin-react-refresh": "^0.4.19",
"globals": "^16.0.0",
"typescript": "~5.8.3",
"typescript-eslint": "^8.30.1",
"vite": "^6.3.5"
}
}
public/vite.svg 0 → 100644
View file @ d8283adb
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>
\ No newline at end of file
src/App.tsx 0 → 100644
View file @ d8283adb
import { BrowserRouter, Route, Routes } from 'react-router'
import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder'
import { Checkout } from './components/Checkout/Checkout'
import { ContactData } from './components/ContactData/ContactData'
function App() {
return (
<BrowserRouter>
<Routes>
<Route path='/' element={<BurgerBuilder />} />
<Route path='/checkout' element={<Checkout />}>
<Route path='contact-data' element={<ContactData />} />
<Route path='test' element={<h1>TESTING</h1>} />
</Route>
<Route path='*' element={<h1>Not found</h1>} />
</Routes>
</BrowserRouter>
)
}
export default App
src/components/BuildControls/BuildControl/BuildControl.module.css 0 → 100644
View file @ d8283adb
.BuildControl {
display: flex;
justify-content: space-between;
align-items: center;
margin: 5px 0;
}
.BuildControl button {
display: block;
font: inherit;
padding: 5px;
margin: 0 5px;
width: 80px;
border: 1px solid #aa6817;
cursor: pointer;
outline: none;
}
.BuildControl button:disabled {
background-color: #ac9980;
border: 1px solid #7e7365;
color: #ccc;
cursor: default;
}
.BuildControl button:hover:disabled {
background-color: #ac9980;
color: #ccc;
cursor: not-allowed;
}
.Label {
padding: 10px;
font-weight: bold;
width: 80px;
text-transform: capitalize;
}
.BuildControl .Less {
background-color: #d39952;
color: white;
}
.BuildControl .More {
background-color: #8f5e1e;
color: white;
}
.BuildControl .Less:hover,
.BuildControl .Less:active {
background-color: #daa972;
color: white;
}
.BuildControl .More:hover,
.BuildControl .More:active {
background-color: #99703f;
color: white;
}
src/components/BuildControls/BuildControl/BuildControl.tsx 0 → 100644
View file @ d8283adb
import { TIngredientNames } from '../../../types/TIngredientNames'
import styles from './BuildControl.module.css'
import { MouseEventHandler } from 'react'
type Props = {
type: TIngredientNames
added: MouseEventHandler<HTMLButtonElement>
removed: MouseEventHandler<HTMLButtonElement>
disabled?: boolean
}
const BuildControl = ({type, added, removed, disabled}: Props) => {
return (
<div className={styles.BuildControl}>
<div className={styles.Label}>{type}</div>
<button disabled={!disabled} onClick={removed} className={styles.Less}>Less</button>
<button onClick={added} className={styles.More}>More</button>
</div>
)
}
export default BuildControl
\ No newline at end of file
src/components/BuildControls/BuildControls.module.css 0 → 100644
View file @ d8283adb
.BuildControls {
width: 100%;
background-color: #cf8f2e;
display: flex;
flex-flow: column;
align-items: center;
box-shadow: 0 2px 1px #ccc;
margin: auto;
padding: 10px 0;
}
.OrderButton {
background-color: #dad735;
outline: none;
cursor: pointer;
border: 1px solid #966909;
color: #966909;
font-family: inherit;
font-size: 1.2em;
padding: 15px 30px;
box-shadow: 2px 2px 2px #966909;
}
.OrderButton:hover, .OrderButton:active {
background-color: #a0db41;
border: 1px solid #966909;
color: #966909;
}
.OrderButton:disabled {
background-color: #c7c6c6;
cursor: not-allowed;
border: 1px solid #ccc;
color: #888888;
}
.OrderButton:not(:disabled) {
animation: enable 0.3s linear;
}
@keyframes enable {
0% {
transform: scale(1);
}
60% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
\ No newline at end of file
src/components/BuildControls/BuildControls.tsx 0 → 100644
View file @ d8283adb
import { TIngredients } from '../../types/TIngredients'
import styles from './BuildControls.module.css'
import BuildControl from './BuildControl/BuildControl'
import { TIngredientNames } from '../../types/TIngredientNames'
import { EIngredientPrices } from '../../enums/EIngredientPrices'
import Modal from '../UI/Modal/Modal'
import { useRef } from 'react'
import OrderSummary from '../OrderSummary/OrderSummary'
type Props = {
ingredients: TIngredients
price: number
ingredientAdded: (type: TIngredientNames) => void
ingredientRemoved: (type: TIngredientNames) => void
}
const BuildControls = ({ingredients, price, ingredientAdded, ingredientRemoved}: Props) => {
const modalRef = useRef<HTMLDialogElement>(null)
const showModalHandler = () => {
if(!modalRef.current) return
modalRef.current.showModal()
}
return (
<div className={styles.BuildControls}>
<p>Current Price: <strong>{price} ₸</strong></p>
{Object.keys(ingredients)
.map(ingType => {
return <BuildControl
key={ingType}
type={ingType as keyof typeof ingredients}
added={() => ingredientAdded(ingType as keyof typeof ingredients)}
removed={() => ingredientRemoved(ingType as keyof typeof ingredients)}
disabled={!!ingredients[ingType as keyof typeof ingredients]}
/>
})
}
<button
disabled={price <= EIngredientPrices.bread}
className={styles.OrderButton}
onClick={showModalHandler}
>
ORDER NOW
</button>
<Modal ref={modalRef}>
<OrderSummary
ingredients={ingredients}
price={price}
/>
</Modal>
</div>
)
}
export default BuildControls
\ No newline at end of file
src/components/Burger/Burger.module.css 0 → 100644
View file @ d8283adb
.Burger {
width: 100%;
margin: auto;
height: 250px;
overflow: auto;
text-align: center;
font-weight: bold;
font-size: 1.2rem;
}
@media (min-width: 1000px) and (min-height: 700px) {
.Burger {
width: 700px;
height: 600px;
}
}
@media (min-width: 500px) and (min-height: 401px) {
.Burger {
width: 450px;
height: 300px;
}
}
@media (min-width: 500px) and (max-height: 400px) {
.Burger {
width: 350px;
height: 200px;
}
}
src/components/Burger/Burger.tsx 0 → 100644
View file @ d8283adb
import { TIngredients } from "../../types/TIngredients"
import styles from './Burger.module.css'
import Ingredient from "../Ingredient/Ingredient"
type Props = {
ingredients: TIngredients
}
const Burger = ({ingredients}: Props) => {
const ingList: React.ReactNode[] = []
Object.keys(ingredients)
.forEach((igKey: string) => {
let amount: number = ingredients[igKey as keyof typeof ingredients]
for (let i = 0; i < amount; i++) {
ingList.push(<Ingredient key={igKey + i} type={igKey as keyof typeof ingredients} />)
}
})
return (
<div className={styles.Burger}>
<Ingredient type="bread-top" />
{ingList.length
?
ingList
:
<p>Please start adding ingredients!</p>
}
<Ingredient type="bread-bottom" />
</div>
)
}
export default Burger
\ No newline at end of file
src/components/BurgerBuilder/BurgerBuilder.tsx 0 → 100644
View file @ d8283adb
'use client'
import { TIngredients } from "../../types/TIngredients"
import { useState } from "react"
import Burger from "../Burger/Burger"
import BuildControls from "../BuildControls/BuildControls"
import { TIngredientNames } from "../../types/TIngredientNames"
import { EIngredientPrices } from "../../enums/EIngredientPrices"
const BurgerBuilder = () => {
const [totalPrice, setTotalPrice] = useState<number>(EIngredientPrices.bread)
const [ingredients, setIngredients] = useState<TIngredients>({
salad: 0,
meat: 0,
bacon: 0,
cheese: 0
})
const addIngredientHandler = (type: TIngredientNames) => {
setIngredients(prevState => ({...prevState, [type]: prevState[type] + 1}))
setTotalPrice(prevState => prevState + EIngredientPrices[type])
}
const removeIngredientHandler = (type: TIngredientNames) => {
setIngredients(prevState => ({...prevState, [type]: Math.max(0, prevState[type] - 1)}))
setTotalPrice(prevState => prevState - EIngredientPrices[type])
}
return (
<>
<Burger ingredients={ingredients} />
<BuildControls
ingredients={ingredients}
price={totalPrice}
ingredientAdded={addIngredientHandler}
ingredientRemoved={removeIngredientHandler}
/>
</>
)
}
export default BurgerBuilder
\ No newline at end of file
src/components/Checkout/Checkout.tsx 0 → 100644
View file @ d8283adb
import { useRef } from "react";
import { TIngredients } from "../../types/TIngredients";
import { CheckoutSummary } from "../CheckoutSummary/CheckoutSummary";
import { useNavigate, useSearchParams } from "react-router-dom";
export function Checkout() {
const [searchParams] = useSearchParams()
const ingredients = useRef(Object.fromEntries(searchParams) as unknown as TIngredients)
const navigate = useNavigate();
const checkoutCancelledHandler = () => {
navigate('/');
};
const checkoutContinuedHandler = () => {
navigate('contact-data');
};
return <CheckoutSummary
ingredients={ingredients.current}
checkoutContinued={checkoutContinuedHandler}
checkoutCancelled={checkoutCancelledHandler}
/>;
}
\ No newline at end of file
src/components/CheckoutSummary/CheckoutSummary.module.css 0 → 100644
View file @ d8283adb
.CheckoutSummary {
text-align: center;
width: 80%;
margin: auto;
}
.CheckoutSummaryBurger {
width: 100%;
margin: auto;
}
@media (min-width: 600px) {
.CheckoutSummary {
width: 500px;
}
}
\ No newline at end of file
src/components/CheckoutSummary/CheckoutSummary.tsx 0 → 100644
View file @ d8283adb
import Burger from "../Burger/Burger";
import { TIngredients } from "../../types/TIngredients";
import Button from "../UI/Button/Button";
import styles from "./CheckoutSummary.module.css";
import { MouseEventHandler } from "react";
import { Outlet } from "react-router-dom";
interface Props {
ingredients: TIngredients;
checkoutContinued: MouseEventHandler<HTMLButtonElement>
checkoutCancelled: MouseEventHandler<HTMLButtonElement>
}
export function CheckoutSummary({ ingredients, checkoutContinued, checkoutCancelled }: Props) {
return (
<div className={styles.CheckoutSummary}>
<h1>We hope it tastes well!</h1>
<div className={styles.CheckoutSummaryBurger}>
<Burger ingredients={ingredients} />
</div>
<Button btnType="Danger" onClick={checkoutCancelled}>
CANCEL
</Button>
<Button btnType="Success" onClick={checkoutContinued}>
CONTINUE
</Button>
<Outlet />
</div>
);
}
\ No newline at end of file
src/components/ContactData/ContactData.module.css 0 → 100644
View file @ d8283adb
.ContactData {
margin: 20px auto;
width: 80%;
text-align: center;
box-shadow: 0 2px 3px #ccc;
border: 1px solid #eee;
padding: 10px;
box-sizing: border-box;
}
.ContactData > form {
display: flex;
flex-direction: column;
align-items: center;
}
.Input {
display: block;
}
@media (min-width: 600px) {
.ContactData {
width: 500px;
}
}
\ No newline at end of file
src/components/ContactData/ContactData.tsx 0 → 100644
View file @ d8283adb
import Button from '../UI/Button/Button';
import styles from './ContactData.module.css';
export function ContactData() {
return (
<div className={styles.ContactData}>
<h4>Enter your Contact Data</h4>
<form>
<input className={styles.Input} type="text" name="name" placeholder="Your Name" />
<input className={styles.Input} type="email" name="email" placeholder="Your Mail" />
<input className={styles.Input} type="text" name="street" placeholder="Street" />
<input className={styles.Input} type="text" name="postal" placeholder="Postal Code" />
<Button onClick={() => {}} btnType="Success">
ORDER
</Button>
</form>
</div>
);
}
\ No newline at end of file
src/components/Ingredient/Ingredient.module.css 0 → 100644
View file @ d8283adb
.BreadBottom {
height: 13%;
width: 80%;
background: linear-gradient(#f08e4a, #e27b36);
border-radius: 0 0 30px 30px;
box-shadow: inset -15px 0 #c15711;
margin: 2% auto;
}
.BreadTop {
height: 20%;
width: 80%;
background: linear-gradient(#bc581e, #e27b36);
border-radius: 50% 50% 0 0;
box-shadow: inset -15px 0 #c15711;
margin: 2% auto;
position: relative;
}
.Seeds1 {
width: 10%;
height: 15%;
position: absolute;
background-color: white;
left: 30%;
top: 50%;
border-radius: 40%;
transform: rotate(-20deg);
box-shadow: inset -2px -3px #c9c9c9;
}
.Seeds1:after {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: white;
left: -170%;
top: -260%;
border-radius: 40%;
transform: rotate(60deg);
box-shadow: inset -1px 2px #c9c9c9;
}
.Seeds1:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: white;
left: 180%;
top: -50%;
border-radius: 40%;
transform: rotate(60deg);
box-shadow: inset -1px -3px #c9c9c9;
}
.Seeds2 {
width: 10%;
height: 15%;
position: absolute;
background-color: white;
left: 64%;
top: 50%;
border-radius: 40%;
transform: rotate(10deg);
box-shadow: inset -3px 0 #c9c9c9;
}
.Seeds2:before {
content: "";
width: 100%;
height: 100%;
position: absolute;
background-color: white;
left: 150%;
top: -130%;
border-radius: 40%;
transform: rotate(90deg);
box-shadow: inset 1px 3px #c9c9c9;
}
.Meat {
width: 80%;
height: 8%;
background: linear-gradient(#7f3608, #702e05);
margin: 2% auto;
border-radius: 15px;
}
.Cheese {
width: 90%;
height: 4.5%;
margin: 2% auto;
background: linear-gradient(#f4d004, #d6bb22);
border-radius: 20px;
}
.Salad {
width: 85%;
height: 7%;
margin: 2% auto;
background: linear-gradient(#228c1d, #91ce50);
border-radius: 20px;
}
.Bacon {
width: 80%;
height: 3%;
background: linear-gradient(#bf3813, #c45e38);
margin: 2% auto;
}
src/components/Ingredient/Ingredient.tsx 0 → 100644
View file @ d8283adb
import { TIngredientNames } from '../../types/TIngredientNames'
import styles from './Ingredient.module.css'
type Props = {
type: TIngredientNames | 'bread-top' | 'bread-bottom'
}
const Ingredient = ({type}: Props) => {
switch (type) {
case 'bread-bottom':
return <div className={styles.BreadBottom} />;
case 'bread-top':
return (
<div className={styles.BreadTop}>
<div className={styles.Seeds1}/>
<div className={styles.Seeds2}/>
</div>
);
case 'meat':
return <div className={styles.Meat} />;
case 'cheese':
return <div className={styles.Cheese} />;
case 'salad':
return <div className={styles.Salad} />;
case 'bacon':
return <div className={styles.Bacon} />;
default:
return null;
}
}
export default Ingredient
\ No newline at end of file
src/components/OrderSummary/OrderSummary.module.css 0 → 100644
View file @ d8283adb
.listItem {
text-transform: capitalize;
}
.list {
margin: 20px;
}
.formBlock {
display: flex;
}
\ No newline at end of file
src/components/OrderSummary/OrderSummary.tsx 0 → 100644
View file @ d8283adb
import { TIngredients } from "../../types/TIngredients"
import styles from './OrderSummary.module.css'
import Button from "../UI/Button/Button"
import { FormEvent } from "react"
import { useNavigate, createSearchParams, URLSearchParamsInit } from "react-router-dom"
type Props = {
ingredients: TIngredients
price: number
}
const OrderSummary = ({ ingredients, price }: Props) => {
const navigate = useNavigate()
const ingredientSummary = Object.keys(ingredients).map((igKey) => {
return (
<li key={igKey}>
<span className={styles.listItem}>{igKey}</span>:{' '}
{ingredients[igKey as keyof typeof ingredients]}
</li>
);
});
const submit = (e: FormEvent) => {
e.preventDefault()
// {meat: 1, salad: 2 ...}
// .../chackout?uim=wefwef123
// .../chackout?meat=1&salad=2& ...
// meat=1&salad=2& ...
const params = createSearchParams(ingredients as unknown as URLSearchParamsInit);
navigate({
pathname: '/checkout',
search: `?${params.toString()}`
})
}
return (
<>
<h3>Your order</h3>
<p>A delicious burger with the following ingredients:</p>
<ul className={styles.list}>{ingredientSummary}</ul>
<p>
<strong>Total Price: {price} ₸</strong>
</p>
<p>Continue to checkout?</p>
<div className={styles.formBlock}>
<form>
<Button formMethod="dialog" btnType="Danger">CLOSE</Button>
</form>
<form onSubmit={submit}>
<Button btnType="Success">CONTINUE</Button>
</form>
</div>
</>
);
}
export default OrderSummary
\ No newline at end of file
src/components/UI/Button/Button.module.css 0 → 100644
View file @ d8283adb
.Button {
border: none;
color: white;
outline: none;
cursor: pointer;
font: inherit;
padding: 10px;
margin: 10px;
font-weight: bold;
}
.Success {
background-color: #5C9210;
}
.Danger {
background-color: #944317;
}
\ No newline at end of file
src/components/UI/Button/Button.tsx 0 → 100644
View file @ d8283adb
import type { MouseEventHandler, ReactNode } from 'react';
import styles from './Button.module.css'
type Props = {
onClick?: MouseEventHandler<HTMLButtonElement>;
btnType: 'Success' | 'Danger';
children: ReactNode;
formMethod?: string
}
const Button = ({onClick, btnType, children, formMethod}: Props) => {
return (
<button formMethod={formMethod} onClick={onClick} className={`${styles.Button} ${styles[btnType]}`}>
{children}
</button>
);
}
export default Button
\ No newline at end of file
src/components/UI/Modal/Modal.module.css 0 → 100644
View file @ d8283adb
.Modal {
margin: auto;
background-color: white;
width: 70%;
border: 1px solid #ccc;
box-shadow: 1px 1px 1px black;
padding: 16px;
box-sizing: border-box;
color: black;
transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
animation: close 0.5s forwards;
&[open] {
animation: open 0.5s forwards;
}
}
.Modal::backdrop {
background-color: rgba(0,0,0,0.5);
}
@media (min-width: 600px) {
.Modal {
width: 500px;
}
}
@keyframes open {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes close {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
\ No newline at end of file
src/components/UI/Modal/Modal.tsx 0 → 100644
View file @ d8283adb
import styles from './Modal.module.css'
type Props = {
children: React.ReactNode
ref: React.RefObject<HTMLDialogElement | null>
}
const Modal = ({children, ref}: Props) => {
const backdropCloseHandler = (e: React.MouseEvent) => {
const dialogDimentions = ref.current?.getBoundingClientRect()
if (ref.current && dialogDimentions && (
e.clientX < dialogDimentions.left ||
e.clientX > dialogDimentions.right ||
e.clientY < dialogDimentions.top ||
e.clientY > dialogDimentions.bottom
)
) {
ref.current.close()
}
}
return <dialog onClick={backdropCloseHandler} className={styles.Modal} ref={ref}>{children}</dialog>
}
export default Modal
\ No newline at end of file
src/components/UI/Modal2/Modal2.tsx 0 → 100644
View file @ d8283adb
const Modal2 = ({close, show, title, children}: any) => {
return (
<div style={{display: show ? 'block' : 'none'}}>
<h1>{title}</h1>
<button onClick={close}>X</button>
{children}
</div>
)
}
\ No newline at end of file
src/enums/EIngredientPrices.ts 0 → 100644
View file @ d8283adb
export enum EIngredientPrices {
salad = 200,
cheese = 400,
bacon = 700,
meat = 900,
bread = 150
}
\ No newline at end of file
src/main.tsx 0 → 100644
View file @ d8283adb
// import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
// import App from './App.tsx'
import { createBrowserRouter, RouterProvider } from 'react-router'
import BurgerBuilder from './components/BurgerBuilder/BurgerBuilder.tsx'
import { Checkout } from './components/Checkout/Checkout.tsx'
import { ContactData } from './components/ContactData/ContactData.tsx'
const router = createBrowserRouter([
{
path: '/',
element: <BurgerBuilder />
},
{
path: '/checkout',
element: <Checkout />,
children: [
{
path: 'contact-data',
element: <ContactData />
}
]
},
{
path: '*',
element: <h1>Not Found</h1>
}
])
createRoot(document.getElementById('root')!).render(
<RouterProvider router={router} />,
)
// createRoot(document.getElementById('root')!).render(
// <StrictMode>
// <App />
// </StrictMode>,
// )
src/types/TIngredientNames.ts 0 → 100644
View file @ d8283adb
export type TIngredientNames =
'salad' |
'meat' |
'bacon' |
'cheese';
src/types/TIngredients.ts 0 → 100644
View file @ d8283adb
import { TIngredientNames } from "./TIngredientNames";
export type TIngredients = {
[key in TIngredientNames]: number;
}
src/vite-env.d.ts 0 → 100644
View file @ d8283adb
/// <reference types="vite/client" />
tsconfig.app.json 0 → 100644
View file @ d8283adb
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
"target": "ES2020",
"useDefineForClassFields": true,
"lib": ["ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": false,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["src"]
}
tsconfig.json 0 → 100644
View file @ d8283adb
{
"files": [],
"references": [
{ "path": "./tsconfig.app.json" },
{ "path": "./tsconfig.node.json" }
]
}
tsconfig.node.json 0 → 100644
View file @ d8283adb
{
"compilerOptions": {
"tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
"target": "ES2022",
"lib": ["ES2023"],
"module": "ESNext",
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
/* Linting */
"strict": true,
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true,
"noUncheckedSideEffectImports": true
},
"include": ["vite.config.ts"]
}
vite.config.ts 0 → 100644
View file @ d8283adb
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vite.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 3000
}
})
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment