diff --git a/src/components/PackagingStatus/PackagingStatus.tsx b/src/components/PackagingStatus/PackagingStatus.tsx index 1b21283..23785fa 100644 --- a/src/components/PackagingStatus/PackagingStatus.tsx +++ b/src/components/PackagingStatus/PackagingStatus.tsx @@ -1,12 +1,22 @@ import Box from "@mui/system/Box"; import { useEffect, useState } from "react"; -import {DeliveryStatus} from './types'; +import { DeliveryStatus } from "./types"; -const PackagingStatus = ({status}: {status:string}) => { +const PackagingStatus = ({ status }: { status: string }) => { return ( - {status} + + {status} - ) -} + ); +}; -export default PackagingStatus; \ No newline at end of file +export default PackagingStatus; diff --git a/src/components/SendPresents/SendPresents.tsx b/src/components/SendPresents/SendPresents.tsx index 4477646..a3c0672 100644 --- a/src/components/SendPresents/SendPresents.tsx +++ b/src/components/SendPresents/SendPresents.tsx @@ -1,99 +1,140 @@ import React from "react"; -import { Box, Button, Card, CardContent, Grid, makeStyles, Modal, Paper, styled, Typography } from "@mui/material"; -import StarIcon from '@mui/icons-material/Star'; -import CloseIcon from '@mui/icons-material/Close'; +import { + Box, + Button, + Card, + CardContent, + Grid, + makeStyles, + Modal, + Paper, + styled, + Typography, +} from "@mui/material"; +import StarIcon from "@mui/icons-material/Star"; +import CloseIcon from "@mui/icons-material/Close"; import ListModal from "../ListModal"; +import PackButton from "../TablePackages/PackButton"; +const SendPresents = () => { + const [open, setOpen] = React.useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); -const SendPresents = () =>{ + const style = { + position: "absolute", + top: "50%", + left: "50%", + transform: "translate(-50%, -50%)", + width: 650, + bgcolor: "background.paper", + borderRadius: "12px", + boxShadow: 24, + p: 4, + display: "flex", + padding: "0", + flexDirection: "column", + }; - const [open, setOpen] = React.useState(false); - const handleOpen = () => setOpen(true); - const handleClose = () => setOpen(false); - - const style = { - position: 'absolute', - top: '50%', - left: '50%', - transform: 'translate(-50%, -50%)', - width: 650, - bgcolor: 'background.paper', - borderRadius: '12px', - boxShadow: 24, - p: 4, - display: 'flex', - padding: '0', - flexDirection: 'column', - }; - - - return (<> - - - - - - - - - Imię:
- x
- Nazwisko:
- xxx xxxxxxxx
- Wiek:
- x lat
- Grzeczność:
- x
- Kraj:
- x
- Miasto:
- x
- Ulica:
- x
- - + return ( + <> + + + + + + + + + Imię: +
+ x
+ Nazwisko: +
+ xxx xxxxxxxx +
+ Wiek: +
+ x lat +
+ Grzeczność: +
+ x
+ Kraj: +
+ x
+ Miasto: +
+ x
+ Ulica: +
+ x
+ + + + + + + + + + ID x
+ calendar xx.xx.xxxx +
+ - - - - - - - ID x
- calendar xx.xx.xxxx
- - - - - category - - - - - - - - - - - - - + + + category + + - + + - - - - ) -} + + + + + + + + + + + + + + ); +}; -export default SendPresents \ No newline at end of file +export default SendPresents; diff --git a/src/components/TablePackages/PackButton.tsx b/src/components/TablePackages/PackButton.tsx new file mode 100644 index 0000000..b627332 --- /dev/null +++ b/src/components/TablePackages/PackButton.tsx @@ -0,0 +1,25 @@ +import { Button } from "@mui/material"; +import { PackButtonProps } from "./types"; + +const PackButton = ({ onClick }: PackButtonProps) => { + return ( + + ); +}; + +export default PackButton; diff --git a/src/components/TablePackages/PackModal.tsx b/src/components/TablePackages/PackModal.tsx new file mode 100644 index 0000000..6bfacdd --- /dev/null +++ b/src/components/TablePackages/PackModal.tsx @@ -0,0 +1,20 @@ +import { Modal, Typography } from "@mui/material"; +import { useState } from "react"; +import PackButton from "./PackButton"; + +const PackModal = ({ id }: { id: number }) => { + const [open, setOpen] = useState(false); + const handleOpen = () => setOpen(true); + const handleClose = () => setOpen(false); + + return ( + <> + + + {id} + + + ); +}; + +export default PackModal; diff --git a/src/components/TablePackages/PackageTableRow.tsx b/src/components/TablePackages/PackageTableRow.tsx index cfd5b8e..9a346ca 100644 --- a/src/components/TablePackages/PackageTableRow.tsx +++ b/src/components/TablePackages/PackageTableRow.tsx @@ -3,37 +3,38 @@ import { TableCell, TableRow } from "@mui/material"; import PackagingStatus from "../PackagingStatus"; import { Packages } from "./types"; import CreationDate from "../CreationDate"; -import Name from "../../components/Name/Name" -import Country from '../../components/Name/Country'; +import Name from "../../components/Name/Name"; +import Country from "../../components/Name/Country"; import { SendPresents } from "../SendPresents"; -const PackageTableRow = ({ id, kindness, createdAt, status, ...rest }: Packages) => { +const PackageTableRow = ({ + id, + kindness, + createdAt, + status, + ...rest +}: Packages) => { return ( + {id} - {id} + - + - + + {rest.city} + - + - - {rest.city} - - - - - - ); }; diff --git a/src/components/TablePackages/types.ts b/src/components/TablePackages/types.ts index da63e8a..4636a57 100644 --- a/src/components/TablePackages/types.ts +++ b/src/components/TablePackages/types.ts @@ -13,14 +13,17 @@ export interface Packages { createdAt: string; } +export interface DeliveryStatus { + id: number; + wish_list_id: number; + name: string; + kindness: number; + status: string; + country: string; + city: string; + created_at: string; +} -export interface DeliveryStatus{ - id: number - wish_list_id: number - name: string - kindness: number - status: string - country: string - city: string - created_at: string +export interface PackButtonProps { + onClick: () => void; }