From bd92806f0a9d53702db97a0d77134bb37f3d1278 Mon Sep 17 00:00:00 2001 From: Taehee Choi Date: Mon, 28 Feb 2022 20:21:06 -0800 Subject: [PATCH] navbar completed --- .eslintrc.json | 2 +- declaration.d.ts | 10 +++++ package.json | 1 + src/App.tsx | 25 +++++++----- src/Theme.tsx | 14 +++++++ src/assets/logo-png.png | Bin 0 -> 19655 bytes src/assets/logo.svg | 1 + src/components/calendar/Calendar.tsx | 4 +- src/components/contacts/Contacts.tsx | 4 +- src/components/home/Home.tsx | 59 +++++++++++++++++++++++++-- src/components/navbar/Clock.tsx | 49 ++++++++++++++++++++++ src/components/navbar/Navbar.tsx | 47 ++++++++++++++------- src/components/navbar/Page.tsx | 6 +++ src/components/sidebar/Sidebar.tsx | 2 - tsconfig.json | 2 +- webpack.config.ts | 7 ++++ 16 files changed, 196 insertions(+), 37 deletions(-) create mode 100644 declaration.d.ts create mode 100644 src/Theme.tsx create mode 100644 src/assets/logo-png.png create mode 100644 src/assets/logo.svg create mode 100644 src/components/navbar/Clock.tsx create mode 100644 src/components/navbar/Page.tsx diff --git a/.eslintrc.json b/.eslintrc.json index 39acfb3..b3f60d6 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -47,7 +47,7 @@ "SwitchCase": 1 } ], - "linebreak-style": ["warn", "unix"], + "linebreak-style": ["warn", "windows"], "quotes": ["error", "double", { "avoidEscape": true }], "semi": ["error", "always"] } diff --git a/declaration.d.ts b/declaration.d.ts new file mode 100644 index 0000000..9534a85 --- /dev/null +++ b/declaration.d.ts @@ -0,0 +1,10 @@ +declare module '*.svg' { + import React = require('react'); + export const ReactComponent: React.FC>; + const src: string; + export default src; + } +declare module "*.png" { + const value: any; + export default value; +} \ No newline at end of file diff --git a/package.json b/package.json index f09b8bf..52ac0f3 100644 --- a/package.json +++ b/package.json @@ -24,6 +24,7 @@ "build-dev": "BUILD_ENV=DEV webpack --config webpack.config.ts", "build-prod": "BUILD_ENV=PROD webpack --config webpack.config.ts", "lint": "eslint src", + "lint-fix": "eslint src --ext .tsx --fix", "prepare": "husky install" }, "eslintConfig": { diff --git a/src/App.tsx b/src/App.tsx index 3cac415..782efaf 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,21 +1,26 @@ -import { ENV } from "./constants/env"; -import { BrowserRouter as Router, Routes, Route, Link } from "react-router-dom"; +import React from "react"; +import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Home from "./components/home/Home"; import Contacts from "./components/contacts/Contacts"; import Calendar from "./components/calendar/Calendar"; import Navbar from "./components/navbar/Navbar"; +import { ThemeProvider } from "@emotion/react"; + +import Theme from "./Theme"; const App: React.FC = () => { return ( - - - - } /> - } /> - } /> - - + + + + + } /> + } /> + } /> + + + ); }; diff --git a/src/Theme.tsx b/src/Theme.tsx new file mode 100644 index 0000000..e192ca9 --- /dev/null +++ b/src/Theme.tsx @@ -0,0 +1,14 @@ +import { createTheme } from "@mui/material/styles"; + +export default createTheme({ + palette: { + primary: { + // white + main: "#ffffff", + }, + secondary: { + // red + main: "#DB00116", + }, + }, +}); diff --git a/src/assets/logo-png.png b/src/assets/logo-png.png new file mode 100644 index 0000000000000000000000000000000000000000..7275a728e819c0ffd8fc4bdcce14f6e6b754c9f5 GIT binary patch literal 19655 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 i(^%gh1N|Q}u@Ih|U9p5F+U-KVyIS3_y \ No newline at end of file diff --git a/src/components/calendar/Calendar.tsx b/src/components/calendar/Calendar.tsx index f23b396..300488f 100644 --- a/src/components/calendar/Calendar.tsx +++ b/src/components/calendar/Calendar.tsx @@ -1,6 +1,4 @@ -import { ENV } from "../../constants/env"; - -const Calendar:React.FC = () => { +const Calendar: React.FC = () => { return Calendar; }; diff --git a/src/components/contacts/Contacts.tsx b/src/components/contacts/Contacts.tsx index 6e9abff..1337589 100644 --- a/src/components/contacts/Contacts.tsx +++ b/src/components/contacts/Contacts.tsx @@ -1,6 +1,4 @@ -import { ENV } from "../../constants/env"; - -const Contacts:React.FC = () => { +const Contacts: React.FC = () => { return Contacts; }; diff --git a/src/components/home/Home.tsx b/src/components/home/Home.tsx index a499ffe..9cf9a8e 100644 --- a/src/components/home/Home.tsx +++ b/src/components/home/Home.tsx @@ -1,7 +1,60 @@ -import { ENV } from "../../constants/env"; +import React from "react"; +import { Box, Button } from "@mui/material"; +import GroupsIcon from "@mui/icons-material/Groups"; +import AddIcon from "@mui/icons-material/Add"; +import CallIcon from "@mui/icons-material/Call"; +import FiberManualRecordIcon from "@mui/icons-material/FiberManualRecord"; -const Home:React.FC = () => { - return Home; +const Home: React.FC = () => { + return ( + + hi + + + + + + + + + + + + + + + + ); }; export default Home; diff --git a/src/components/navbar/Clock.tsx b/src/components/navbar/Clock.tsx new file mode 100644 index 0000000..bb03e2d --- /dev/null +++ b/src/components/navbar/Clock.tsx @@ -0,0 +1,49 @@ +import { Typography } from "@mui/material"; +import Box, { BoxProps } from "@mui/material/Box"; +import { styled } from "@mui/material/styles"; +import React, { useState, useEffect } from "react"; +import CalendarTodayIcon from "@mui/icons-material/CalendarToday"; +import AccessTimeIcon from "@mui/icons-material/AccessTime"; + +const FormattedBox = styled(Box)(({ theme }) => ({ + marginRight: 12, +})); + +const Clock: React.FC = () => { + const [date, setDate] = useState(new Date()); + + useEffect(() => { + setInterval(() => setDate(new Date()), 30000); + }, []); + + return ( + + + + + + + {date.toLocaleDateString("en-GB", { + day: "numeric", + month: "short", + year: "numeric", + })} + + + + + + + + {date.toLocaleString("en-US", { + hour: "numeric", + minute: "numeric", + hour12: true, + })} + + + + ); +}; + +export default Clock; diff --git a/src/components/navbar/Navbar.tsx b/src/components/navbar/Navbar.tsx index d671bc7..9fed9b4 100644 --- a/src/components/navbar/Navbar.tsx +++ b/src/components/navbar/Navbar.tsx @@ -1,21 +1,40 @@ -import { ENV } from "../../constants/env"; +import React from "react"; +import { AppBar, Box, IconButton, Toolbar, Typography } from "@mui/material"; import { Link } from "react-router-dom"; +import Clock from "./Clock"; +import pngLogo from "../../assets/logo-png.png"; +import { Page } from "./Page"; + +const pages: Page[] = [ + { name: "Home", url: "/" }, + { name: "Contacts", url: "/contacts" }, + { name: "Calendar", url: "/calendar" }, +]; + const Navbar: React.FC = () => { return ( - + + + + Kitty Katty! + + {pages.map((page, i) => ( + + + {page.name} + + + ))} + + + ); }; diff --git a/src/components/navbar/Page.tsx b/src/components/navbar/Page.tsx new file mode 100644 index 0000000..89bf369 --- /dev/null +++ b/src/components/navbar/Page.tsx @@ -0,0 +1,6 @@ +interface Page { + name: string; + url: string; +} + +export type { Page }; diff --git a/src/components/sidebar/Sidebar.tsx b/src/components/sidebar/Sidebar.tsx index d829118..f6a1642 100644 --- a/src/components/sidebar/Sidebar.tsx +++ b/src/components/sidebar/Sidebar.tsx @@ -1,5 +1,3 @@ -import { ENV } from "../../constants/env"; - const Sidebar: React.FC = () => { return Sidebar; }; diff --git a/tsconfig.json b/tsconfig.json index d50822b..7ccdec1 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -66,6 +66,6 @@ "forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file. */, "types": ["node", "webpack-env"] }, - "include": ["src"], + "include": ["src", "declaration.d.ts"], "exclude": ["node_modules", "build"] } diff --git a/webpack.config.ts b/webpack.config.ts index ce7a8b9..ad8b3f0 100644 --- a/webpack.config.ts +++ b/webpack.config.ts @@ -61,6 +61,13 @@ const baseConfig: Configuration = { test: /\.svg$/, use: ["@svgr/webpack"], }, + { + test: /\.(png|jpe?g|gif|jp2|webp)$/, + loader: 'file-loader', + options: { + name: '[name].[ext]', + }, + }, ], },