From 0aa3799ca6bdf9116d6aa54c28cf5fb95ad3ec34 Mon Sep 17 00:00:00 2001 From: sjsjsj1246 Date: Wed, 10 Aug 2022 02:11:51 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EB=A9=94=EC=9D=B8=20=ED=99=94=EB=A9=B4?= =?UTF-8?q?=20UI=20=EA=B5=AC=EC=84=B1=20#1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Copyright.tsx | 22 +++++++++ src/pages/Main/Chart.tsx | 78 ++++++++++++++++++++++++++++++ src/pages/Main/Deposits.tsx | 27 +++++++++++ src/pages/Main/Orders.tsx | 93 ++++++++++++++++++++++++++++++++++++ src/pages/Main/Title.tsx | 14 ++++++ src/pages/Main/index.tsx | 66 +++++++++++++++++++++++++ src/pages/Main/listItems.tsx | 72 ++++++++++++++++++++++++++++ 7 files changed, 372 insertions(+) create mode 100644 src/components/Copyright.tsx create mode 100644 src/pages/Main/Chart.tsx create mode 100644 src/pages/Main/Deposits.tsx create mode 100644 src/pages/Main/Orders.tsx create mode 100644 src/pages/Main/Title.tsx create mode 100644 src/pages/Main/index.tsx create mode 100644 src/pages/Main/listItems.tsx diff --git a/src/components/Copyright.tsx b/src/components/Copyright.tsx new file mode 100644 index 0000000..5ab229c --- /dev/null +++ b/src/components/Copyright.tsx @@ -0,0 +1,22 @@ +import { Link, Typography, TypographyProps } from "@mui/material"; +import { FC } from "react"; + +const Copyright: FC = (props) => { + return ( + + {"Copyright © "} + + MoyeoRun + {" "} + {new Date().getFullYear()} + {"."} + + ); +}; + +export default Copyright; diff --git a/src/pages/Main/Chart.tsx b/src/pages/Main/Chart.tsx new file mode 100644 index 0000000..5a7c64b --- /dev/null +++ b/src/pages/Main/Chart.tsx @@ -0,0 +1,78 @@ +import * as React from "react"; +import { useTheme } from "@mui/material/styles"; +import { + LineChart, + Line, + XAxis, + YAxis, + Label, + ResponsiveContainer, +} from "recharts"; +import Title from "./Title"; + +// Generate Sales Data +function createData(time: string, amount?: number) { + return { time, amount }; +} + +const data = [ + createData("00:00", 0), + createData("03:00", 300), + createData("06:00", 600), + createData("09:00", 800), + createData("12:00", 1500), + createData("15:00", 2000), + createData("18:00", 2400), + createData("21:00", 2400), + createData("24:00", undefined), +]; + +export default function Chart() { + const theme = useTheme(); + + return ( + + Today + + + + + + + + + + + ); +} diff --git a/src/pages/Main/Deposits.tsx b/src/pages/Main/Deposits.tsx new file mode 100644 index 0000000..0622041 --- /dev/null +++ b/src/pages/Main/Deposits.tsx @@ -0,0 +1,27 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import Typography from '@mui/material/Typography'; +import Title from './Title'; + +function preventDefault(event: React.MouseEvent) { + event.preventDefault(); +} + +export default function Deposits() { + return ( + + Recent Deposits + + $3,024.00 + + + on 15 March, 2019 + +
+ + View balance + +
+ + ); +} diff --git a/src/pages/Main/Orders.tsx b/src/pages/Main/Orders.tsx new file mode 100644 index 0000000..77abe82 --- /dev/null +++ b/src/pages/Main/Orders.tsx @@ -0,0 +1,93 @@ +import * as React from 'react'; +import Link from '@mui/material/Link'; +import Table from '@mui/material/Table'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableHead from '@mui/material/TableHead'; +import TableRow from '@mui/material/TableRow'; +import Title from './Title'; + +// Generate Order Data +function createData( + id: number, + date: string, + name: string, + shipTo: string, + paymentMethod: string, + amount: number, +) { + return { id, date, name, shipTo, paymentMethod, amount }; +} + +const rows = [ + createData( + 0, + '16 Mar, 2019', + 'Elvis Presley', + 'Tupelo, MS', + 'VISA ⠀•••• 3719', + 312.44, + ), + createData( + 1, + '16 Mar, 2019', + 'Paul McCartney', + 'London, UK', + 'VISA ⠀•••• 2574', + 866.99, + ), + createData(2, '16 Mar, 2019', 'Tom Scholz', 'Boston, MA', 'MC ⠀•••• 1253', 100.81), + createData( + 3, + '16 Mar, 2019', + 'Michael Jackson', + 'Gary, IN', + 'AMEX ⠀•••• 2000', + 654.39, + ), + createData( + 4, + '15 Mar, 2019', + 'Bruce Springsteen', + 'Long Branch, NJ', + 'VISA ⠀•••• 5919', + 212.79, + ), +]; + +function preventDefault(event: React.MouseEvent) { + event.preventDefault(); +} + +export default function Orders() { + return ( + + Recent Orders + + + + Date + Name + Ship To + Payment Method + Sale Amount + + + + {rows.map((row) => ( + + {row.date} + {row.name} + {row.shipTo} + {row.paymentMethod} + {`$${row.amount}`} + + ))} + +
+ + See more orders + + + ); +} diff --git a/src/pages/Main/Title.tsx b/src/pages/Main/Title.tsx new file mode 100644 index 0000000..c060b09 --- /dev/null +++ b/src/pages/Main/Title.tsx @@ -0,0 +1,14 @@ +import * as React from 'react'; +import Typography from '@mui/material/Typography'; + +interface TitleProps { + children?: React.ReactNode; +} + +export default function Title(props: TitleProps) { + return ( + + {props.children} + + ); +} diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx new file mode 100644 index 0000000..8607b03 --- /dev/null +++ b/src/pages/Main/index.tsx @@ -0,0 +1,66 @@ +import React, { FC } from "react"; +import { Box, Container, Grid, Paper, Toolbar } from "@mui/material"; +import Deposits from "./Deposits"; +import Orders from "./Orders"; +import Chart from "./Chart"; +import Copyright from "../../components/Copyright"; + +const Main: FC = () => { + return ( + + theme.palette.mode === "light" + ? theme.palette.grey[100] + : theme.palette.grey[900], + flexGrow: 1, + height: "100vh", + overflow: "auto", + }} + > + + + + {/* Chart */} + + + + + + + {/* Recent Deposits */} + + + + + + + {/* Recent Orders */} + + + + + + + + + + ); +}; + +export default Main; diff --git a/src/pages/Main/listItems.tsx b/src/pages/Main/listItems.tsx new file mode 100644 index 0000000..cf41192 --- /dev/null +++ b/src/pages/Main/listItems.tsx @@ -0,0 +1,72 @@ +import * as React from "react"; +import ListItemButton from "@mui/material/ListItemButton"; +import ListItemIcon from "@mui/material/ListItemIcon"; +import ListItemText from "@mui/material/ListItemText"; +import ListSubheader from "@mui/material/ListSubheader"; +import DashboardIcon from "@mui/icons-material/Dashboard"; +import ShoppingCartIcon from "@mui/icons-material/ShoppingCart"; +import PeopleIcon from "@mui/icons-material/People"; +import BarChartIcon from "@mui/icons-material/BarChart"; +import LayersIcon from "@mui/icons-material/Layers"; +import AssignmentIcon from "@mui/icons-material/Assignment"; + +export const mainListItems = ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export const secondaryListItems = ( + + + Saved reports + + + + + + + + + + + + + + + + + + + + +);