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 0000000..7275a72 Binary files /dev/null and b/src/assets/logo-png.png differ diff --git a/src/assets/logo.svg b/src/assets/logo.svg new file mode 100644 index 0000000..fa7a427 --- /dev/null +++ b/src/assets/logo.svg @@ -0,0 +1 @@ + \ 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]', + }, + }, ], },