Skip to content

5
56_laba
Commit 82c19fa1 authored by Pavel Mishakov's avatar Pavel Mishakov
Browse files
Options

56 laba Done

parent e9c22edd
Hide whitespace changes
Inline Side-by-side
Showing with 357 additions and 312 deletions
public/file.svg deleted 100644 → 0
View file @ e9c22edd
<svg fill="none" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M14.5 13.5V5.41a1 1 0 0 0-.3-.7L9.8.29A1 1 0 0 0 9.08 0H1.5v13.5A2.5 2.5 0 0 0 4 16h8a2.5 2.5 0 0 0 2.5-2.5m-1.5 0v-7H8v-5H3v12a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1M9.5 5V2.12L12.38 5zM5.13 5h-.62v1.25h2.12V5zm-.62 3h7.12v1.25H4.5zm.62 3h-.62v1.25h7.12V11z" clip-rule="evenodd" fill="#666" fill-rule="evenodd"/></svg>
\ No newline at end of file
public/globe.svg deleted 100644 → 0
View file @ e9c22edd
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g clip-path="url(#a)"><path fill-rule="evenodd" clip-rule="evenodd" d="M10.27 14.1a6.5 6.5 0 0 0 3.67-3.45q-1.24.21-2.7.34-.31 1.83-.97 3.1M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.48-1.52a7 7 0 0 1-.96 0H7.5a4 4 0 0 1-.84-1.32q-.38-.89-.63-2.08a40 40 0 0 0 3.92 0q-.25 1.2-.63 2.08a4 4 0 0 1-.84 1.31zm2.94-4.76q1.66-.15 2.95-.43a7 7 0 0 0 0-2.58q-1.3-.27-2.95-.43a18 18 0 0 1 0 3.44m-1.27-3.54a17 17 0 0 1 0 3.64 39 39 0 0 1-4.3 0 17 17 0 0 1 0-3.64 39 39 0 0 1 4.3 0m1.1-1.17q1.45.13 2.69.34a6.5 6.5 0 0 0-3.67-3.44q.65 1.26.98 3.1M8.48 1.5l.01.02q.41.37.84 1.31.38.89.63 2.08a40 40 0 0 0-3.92 0q.25-1.2.63-2.08a4 4 0 0 1 .85-1.32 7 7 0 0 1 .96 0m-2.75.4a6.5 6.5 0 0 0-3.67 3.44 29 29 0 0 1 2.7-.34q.31-1.83.97-3.1M4.58 6.28q-1.66.16-2.95.43a7 7 0 0 0 0 2.58q1.3.27 2.95.43a18 18 0 0 1 0-3.44m.17 4.71q-1.45-.12-2.69-.34a6.5 6.5 0 0 0 3.67 3.44q-.65-1.27-.98-3.1" fill="#666"/></g><defs><clipPath id="a"><path fill="#fff" d="M0 0h16v16H0z"/></clipPath></defs></svg>
\ No newline at end of file
public/next.svg deleted 100644 → 0
View file @ e9c22edd
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 394 80"><path fill="#000" d="M262 0h68.5v12.7h-27.2v66.6h-13.6V12.7H262V0ZM149 0v12.7H94v20.4h44.3v12.6H94v21h55v12.6H80.5V0h68.7zm34.3 0h-17.8l63.8 79.4h17.9l-32-39.7 32-39.6h-17.9l-23 28.6-23-28.6zm18.3 56.7-9-11-27.1 33.7h17.8l18.3-22.7z"/><path fill="#000" d="M81 79.3 17 0H0v79.3h13.6V17l50.2 62.3H81Zm252.6-.4c-1 0-1.8-.4-2.5-1s-1.1-1.6-1.1-2.6.3-1.8 1-2.5 1.6-1 2.6-1 1.8.3 2.5 1a3.4 3.4 0 0 1 .6 4.3 3.7 3.7 0 0 1-3 1.8zm23.2-33.5h6v23.3c0 2.1-.4 4-1.3 5.5a9.1 9.1 0 0 1-3.8 3.5c-1.6.8-3.5 1.3-5.7 1.3-2 0-3.7-.4-5.3-1s-2.8-1.8-3.7-3.2c-.9-1.3-1.4-3-1.4-5h6c.1.8.3 1.6.7 2.2s1 1.2 1.6 1.5c.7.4 1.5.5 2.4.5 1 0 1.8-.2 2.4-.6a4 4 0 0 0 1.6-1.8c.3-.8.5-1.8.5-3V45.5zm30.9 9.1a4.4 4.4 0 0 0-2-3.3 7.5 7.5 0 0 0-4.3-1.1c-1.3 0-2.4.2-3.3.5-.9.4-1.6 1-2 1.6a3.5 3.5 0 0 0-.3 4c.3.5.7.9 1.3 1.2l1.8 1 2 .5 3.2.8c1.3.3 2.5.7 3.7 1.2a13 13 0 0 1 3.2 1.8 8.1 8.1 0 0 1 3 6.5c0 2-.5 3.7-1.5 5.1a10 10 0 0 1-4.4 3.5c-1.8.8-4.1 1.2-6.8 1.2-2.6 0-4.9-.4-6.8-1.2-2-.8-3.4-2-4.5-3.5a10 10 0 0 1-1.7-5.6h6a5 5 0 0 0 3.5 4.6c1 .4 2.2.6 3.4.6 1.3 0 2.5-.2 3.5-.6 1-.4 1.8-1 2.4-1.7a4 4 0 0 0 .8-2.4c0-.9-.2-1.6-.7-2.2a11 11 0 0 0-2.1-1.4l-3.2-1-3.8-1c-2.8-.7-5-1.7-6.6-3.2a7.2 7.2 0 0 1-2.4-5.7 8 8 0 0 1 1.7-5 10 10 0 0 1 4.3-3.5c2-.8 4-1.2 6.4-1.2 2.3 0 4.4.4 6.2 1.2 1.8.8 3.2 2 4.3 3.4 1 1.4 1.5 3 1.5 5h-5.8z"/></svg>
\ No newline at end of file
public/vercel.svg deleted 100644 → 0
View file @ e9c22edd
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1155 1000"><path d="m577.3 0 577.4 1000H0z" fill="#fff"/></svg>
\ No newline at end of file
public/window.svg deleted 100644 → 0
View file @ e9c22edd
<svg fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 2.5h13v10a1 1 0 0 1-1 1h-11a1 1 0 0 1-1-1zM0 1h16v11.5a2.5 2.5 0 0 1-2.5 2.5h-11A2.5 2.5 0 0 1 0 12.5zm3.75 4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5M7 4.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0m1.75.75a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5" fill="#666"/></svg>
\ No newline at end of file
src/app/globals.css
View file @ 82c19fa1
:root {
--background: #ffffff;
--foreground: #171717;
}
@media (prefers-color-scheme: dark) {
:root {
--background: #0a0a0a;
--foreground: #ededed;
}
}
html,
body {
max-width: 100vw;
overflow-x: hidden;
}
body {
color: var(--foreground);
background: var(--background);
font-family: Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
* { * {
box-sizing: border-box;
padding: 0;
margin: 0; margin: 0;
} padding: 0;
box-sizing: border-box;
a { }
color: inherit; \ No newline at end of file
text-decoration: none;
}
@media (prefers-color-scheme: dark) {
html {
color-scheme: dark;
}
}
src/app/layout.tsx
View file @ 82c19fa1
...@@ -13,15 +13,14 @@ const geistMono = Geist_Mono({ ...@@ -13,15 +13,14 @@ const geistMono = Geist_Mono({
}); });
export const metadata: Metadata = { export const metadata: Metadata = {
title: "Create Next App", title: "Laba",
description: "Generated by create next app", description: "Bill laba",
}; };
export default function RootLayout({ type Props = {
children, children: React.ReactNode
}: Readonly<{ }
children: React.ReactNode; const RootLayout = ({children}: Props) => {
}>) {
return ( return (
<html lang="en"> <html lang="en">
<body className={`${geistSans.variable} ${geistMono.variable}`}> <body className={`${geistSans.variable} ${geistMono.variable}`}>
...@@ -30,3 +29,5 @@ export default function RootLayout({ ...@@ -30,3 +29,5 @@ export default function RootLayout({
</html> </html>
); );
} }
export default RootLayout
\ No newline at end of file
src/app/page.module.css deleted 100644 → 0
View file @ e9c22edd
.page {
--gray-rgb: 0, 0, 0;
--gray-alpha-200: rgba(var(--gray-rgb), 0.08);
--gray-alpha-100: rgba(var(--gray-rgb), 0.05);
--button-primary-hover: #383838;
--button-secondary-hover: #f2f2f2;
display: grid;
grid-template-rows: 20px 1fr 20px;
align-items: center;
justify-items: center;
min-height: 100svh;
padding: 80px;
gap: 64px;
font-family: var(--font-geist-sans);
}
@media (prefers-color-scheme: dark) {
.page {
--gray-rgb: 255, 255, 255;
--gray-alpha-200: rgba(var(--gray-rgb), 0.145);
--gray-alpha-100: rgba(var(--gray-rgb), 0.06);
--button-primary-hover: #ccc;
--button-secondary-hover: #1a1a1a;
}
}
.main {
display: flex;
flex-direction: column;
gap: 32px;
grid-row-start: 2;
}
.main ol {
font-family: var(--font-geist-mono);
padding-left: 0;
margin: 0;
font-size: 14px;
line-height: 24px;
letter-spacing: -0.01em;
list-style-position: inside;
}
.main li:not(:last-of-type) {
margin-bottom: 8px;
}
.main code {
font-family: inherit;
background: var(--gray-alpha-100);
padding: 2px 4px;
border-radius: 4px;
font-weight: 600;
}
.ctas {
display: flex;
gap: 16px;
}
.ctas a {
appearance: none;
border-radius: 128px;
height: 48px;
padding: 0 20px;
border: none;
border: 1px solid transparent;
transition:
background 0.2s,
color 0.2s,
border-color 0.2s;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
line-height: 20px;
font-weight: 500;
}
a.primary {
background: var(--foreground);
color: var(--background);
gap: 8px;
}
a.secondary {
border-color: var(--gray-alpha-200);
min-width: 158px;
}
.footer {
grid-row-start: 3;
display: flex;
gap: 24px;
}
.footer a {
display: flex;
align-items: center;
gap: 8px;
}
.footer img {
flex-shrink: 0;
}
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
a.primary:hover {
background: var(--button-primary-hover);
border-color: transparent;
}
a.secondary:hover {
background: var(--button-secondary-hover);
border-color: transparent;
}
.footer a:hover {
text-decoration: underline;
text-underline-offset: 4px;
}
}
@media (max-width: 600px) {
.page {
padding: 32px;
padding-bottom: 80px;
}
.main {
align-items: center;
}
.main ol {
text-align: center;
}
.ctas {
flex-direction: column;
}
.ctas a {
font-size: 14px;
height: 40px;
padding: 0 16px;
}
a.secondary {
min-width: auto;
}
.footer {
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
}
@media (prefers-color-scheme: dark) {
.logo {
filter: invert();
}
}
src/app/page.tsx
View file @ 82c19fa1
import Image from "next/image"; import Home from "@/pages/Home/Home"
import styles from "./page.module.css";
export default function Home() {
return (
<div className={styles.page}>
<main className={styles.main}>
<Image
className={styles.logo}
src="/next.svg"
alt="Next.js logo"
width={180}
height={38}
priority
/>
<ol>
<li>
Get started by editing <code>src/app/page.tsx</code>.
</li>
<li>Save and see your changes instantly.</li>
</ol>
<div className={styles.ctas}> const HomePage = () => {
<a return <Home />
className={styles.primary}
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
className={styles.logo}
src="/vercel.svg"
alt="Vercel logomark"
width={20}
height={20}
/>
Deploy now
</a>
<a
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
className={styles.secondary}
>
Read our docs
</a>
</div>
</main>
<footer className={styles.footer}>
<a
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/file.svg"
alt="File icon"
width={16}
height={16}
/>
Learn
</a>
<a
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/window.svg"
alt="Window icon"
width={16}
height={16}
/>
Examples
</a>
<a
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app"
target="_blank"
rel="noopener noreferrer"
>
<Image
aria-hidden
src="/globe.svg"
alt="Globe icon"
width={16}
height={16}
/>
Go to nextjs.org →
</a>
</footer>
</div>
);
} }
export default HomePage
\ No newline at end of file
src/components/Bill/Bill.module.css 0 → 100644
View file @ 82c19fa1
.Bill {
max-width: 400px;
margin: 20px auto;
padding: 20px;
border-radius: 4px;
background: white;
box-shadow: 1px 1px 2px 2px grey;
}
\ No newline at end of file
src/components/Bill/Bill.tsx 0 → 100644
View file @ 82c19fa1
'use client'
import { ChangeEvent, useState } from 'react'
import RadioGroup from '../UI/RadioGroup/RadioGroup'
import styles from './Bill.module.css'
import { EPaymentType } from '@/enums/EPaymentType'
import { eqInputArray, spInputArray, Input } from './inputs'
import InputBlock from '../UI/InputBlock/InputBlock'
import SeparatePeople from '../SeparatePeople/SeparatePeople'
const Bill = () => {
const [paymentType, setPaymentType] = useState<EPaymentType | null>(null)
const [state, setState] = useState<{
amount: number
sum: number
tips: number
delivery: number
}>({
amount: 0,
sum: 0,
tips: 0,
delivery: 0
})
const [isCalculated, setIsCalculated] = useState<boolean>(false)
const [people, setPeople] = useState<{
[id: string]: {name: string, sum: string}
}>({})
const renderInputs = () => {
if (!paymentType) return
const arr = paymentType === EPaymentType.EQUALY ? eqInputArray : spInputArray
return arr.map((input: Input) => {
return (
<InputBlock
key={input.name}
ext={input.ext}
label={input.label}
value={state[input.name as keyof typeof state].toString()}
name={input.name}
onChange={inputOnChangeHandler}
/>
)
})
}
const radioOnChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
setPaymentType(e.target.value as EPaymentType)
}
const inputOnChangeHandler = (e: ChangeEvent<HTMLInputElement>) => {
setState(prevState => {
return {...prevState, [e.target.name]: e.target.value}
})
}
const calculateHandler = () => {
setIsCalculated(true)
}
const calculate = (): React.ReactNode => {
if (paymentType === EPaymentType.EQUALY) {
const sum = Number(state.sum) + Number(state.delivery) + Math.ceil((Number(state.sum) * Number(state.tips) / 100))
return (
<div>
<p>SUM: {sum} tenge</p>
<p>PEOPLE: {state.amount} person</p>
<p>EACH PAYS: {Math.ceil(sum / state.amount)}</p>
</div>
)
} else if (paymentType === EPaymentType.SEPARATELY) {
let sum = 0
const peopleAmount = Object.keys(people).length
const peopleArray: React.ReactNode = Object.keys(people).map(id => {
const p = people[id as keyof typeof people]
const tempSum = Math.ceil(Number(p.sum) + Math.ceil(state.delivery / peopleAmount)) + Math.ceil((Number(p.sum) * Number(state.tips) / 100))
sum += tempSum
return <p key={id}>{p.name} : {tempSum}</p>
})
return (
<div>
<p>SUM: {sum} tenge</p>
<p>PEOPLE: {peopleAmount} person</p>
{peopleArray}
</div>
)
}
return null
}
const peopleOnChangeHandler = (e: ChangeEvent<HTMLInputElement>, id: number) => {
setPeople((prevState) => {
return {
...prevState,
[id]: {
...prevState[id],
[e.target.name]: e.target.value
}
}
})
}
return (
<div className={styles.Bill}>
<RadioGroup
name={'payment_type'}
onChange={radioOnChangeHandler}
title='Bill counts as:'
radioGroup={[
{
label: 'Equaly',
value: EPaymentType.EQUALY,
},
{
label: 'Separately',
value: EPaymentType.SEPARATELY,
},
]}
/>
{paymentType === EPaymentType.SEPARATELY ? <SeparatePeople
onChange={(e, id) => {peopleOnChangeHandler(e, id)}}
deletePeople={(id) => {
setPeople(prevState => {
delete prevState[id]
return {...prevState}
})
}}
/> : null}
{renderInputs()}
{paymentType ? <button onClick={calculateHandler}>Calculate</button> : null}
{isCalculated ? calculate() : null}
</div>
)
}
export default Bill
\ No newline at end of file
src/components/Bill/inputs.ts 0 → 100644
View file @ 82c19fa1
export type Input = {
label: string
name: string
ext: string
}
export const eqInputArray: Input[] = [
{
label: 'People',
name: 'amount',
ext: 'pers'
},
{
label: 'Sum',
name: 'sum',
ext: 'tenge'
},
{
label: 'Tips',
name: 'tips',
ext: '%'
},
{
label: 'Delivery',
name: 'delivery',
ext: 'tenge'
},
]
export const spInputArray: Input[] = [
{
label: 'Tips',
name: 'tips',
ext: '%'
},
{
label: 'Delivery',
name: 'delivery',
ext: 'tenge'
},
]
\ No newline at end of file
src/components/SeparatePeople/SeparateInput.tsx 0 → 100644
View file @ 82c19fa1
import { ChangeEventHandler, MouseEventHandler } from "react"
type Props = {
onChange: ChangeEventHandler<HTMLInputElement>
onClick: (id: number) => void
id: number
}
const SeparateInput = ({onChange, onClick, id}: Props) => {
return (
<div>
<input onChange={onChange} name="name" type="text" /> <input onChange={onChange} name="sum" type="text" /> tenge <span onClick={() => onClick(id)}>X</span>
</div>
)
}
export default SeparateInput
\ No newline at end of file
src/components/SeparatePeople/SeparatePeople.tsx 0 → 100644
View file @ 82c19fa1
'use client'
import { ChangeEvent, ChangeEventHandler, useState } from "react"
import SeparateInput from "./SeparateInput"
type Props = {
onChange: (e: ChangeEvent<HTMLInputElement>, id: number) => void
deletePeople: (id: number) => void
}
const SeparatePeople = ({onChange, deletePeople}: Props) => {
const [people, setPeople] = useState<{
id: number,
name: string,
sum: string
}[]>([])
const deleteHandler = (id: number) => {
const copyState = [...people]
const filteredState = copyState.filter(p => p.id !== id)
setPeople(filteredState)
deletePeople(id)
}
const addPeople = () => {
setPeople((prevState) => {
return [...prevState, {
id: Math.random(),
name: '',
sum: ''
}]
})
}
return (
<>
{people.map((p) => {
return (
<SeparateInput
key={p.id}
onChange={(e) => onChange(e, p.id)}
onClick={deleteHandler}
id={p.id}
/>
)
})}
<button onClick={addPeople}>+</button>
</>
)
}
export default SeparatePeople
\ No newline at end of file
src/components/UI/InputBlock/InputBlock.module.css 0 → 100644
View file @ 82c19fa1
.InputBlockLabel {
width: 80px;
display: inline-block;
}
\ No newline at end of file
src/components/UI/InputBlock/InputBlock.tsx 0 → 100644
View file @ 82c19fa1
import { ChangeEventHandler } from 'react'
import styles from './InputBlock.module.css'
type Props = {
value: string
label: string
name: string
ext: string
onChange: ChangeEventHandler<HTMLInputElement>
}
const InputBlock = ({value, label, name, ext, onChange}: Props) => {
return (
<div>
<span className={styles.InputBlockLabel}>{label}</span>
<input type="text" name={name} value={value} onChange={onChange} />
<span>{ext}</span>
</div>
)
}
export default InputBlock
\ No newline at end of file
src/components/UI/RadioGroup/RadioGroup.tsx 0 → 100644
View file @ 82c19fa1
'use client'
import { TRadioGroupItem } from '@/types/TRadioGroupItem'
import styles from './RadioGroup.module.css'
import { ChangeEventHandler } from 'react'
type Props = {
title: string
name: string
radioGroup: TRadioGroupItem[]
onChange: ChangeEventHandler<HTMLInputElement>
}
const RadioGroup = ({title, name, radioGroup, onChange}: Props) => {
return (
<div>
<h4>{title}</h4>
{radioGroup.map((rb: TRadioGroupItem) => {
return (
<div key={rb.value + rb.label}>
<input
type="radio"
value={rb.value}
checked={rb.checked}
name={name}
onChange={onChange}
/>
<span>
{rb.label}
</span>
</div>
)
})}
</div>
)
}
export default RadioGroup
\ No newline at end of file
src/enums/EPaymentType.ts 0 → 100644
View file @ 82c19fa1
export enum EPaymentType {
EQUALY = 'EQUALY',
SEPARATELY = 'SEPARATELY'
}
\ No newline at end of file
src/pages/Home/Home.tsx 0 → 100644
View file @ 82c19fa1
import Bill from "@/components/Bill/Bill"
const Home = () => {
return (
<>
<h1 style={{textAlign: 'center'}}>HOME PAGE</h1>
<Bill />
</>
)
}
export default Home
\ No newline at end of file
src/types/TRadioGroupItem.ts 0 → 100644
View file @ 82c19fa1
import { EPaymentType } from "@/enums/EPaymentType"
export type TRadioGroupItem = {
label: string
checked?: boolean
value: EPaymentType
}
\ No newline at end of file
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