From b554620f5a4e3f906d9fada27ce54c4a50853335 Mon Sep 17 00:00:00 2001 From: Ayub Abdullah Date: Fri, 3 Mar 2023 14:17:02 +0300 Subject: [PATCH 01/46] creating Layout component and install propTypes --- app/components/Layout.jsx | 14 ++++++++++++++ app/root.jsx | 6 +++++- package.json | 1 + 3 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 app/components/Layout.jsx diff --git a/app/components/Layout.jsx b/app/components/Layout.jsx new file mode 100644 index 0000000..32dbb95 --- /dev/null +++ b/app/components/Layout.jsx @@ -0,0 +1,14 @@ +import propTypes from "prop-types" + +export default function Layout({ children }) { + return ( + <> +

My App

+ {children} + + ) +} + +Layout.propTypes = { + children: propTypes.node.isRequired, +} diff --git a/app/root.jsx b/app/root.jsx index aacec3a..70fc4a5 100644 --- a/app/root.jsx +++ b/app/root.jsx @@ -8,6 +8,7 @@ import { } from "@remix-run/react" import rootStyles from "~/styles/root.css" +import Layout from "~/components/Layout" /** * @returns {import("@remix-run/node").LinkDescriptor[]} @@ -36,7 +37,10 @@ export default function App() { - + + + + diff --git a/package.json b/package.json index 1b2c0f3..e66d0cc 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.31.11", "isbot": "^3.6.5", + "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", "sass": "^1.57.1" From 2f4d3cfd8541dd51e4465e0986d554226f7fc35b Mon Sep 17 00:00:00 2001 From: Ayub Abdullah Date: Fri, 3 Mar 2023 14:46:57 +0300 Subject: [PATCH 02/46] creating Header Component --- app/components/Header.jsx | 14 ++++++++++++++ app/components/Layout.jsx | 3 ++- package.json | 1 + yarn.lock | 5 +++++ 4 files changed, 22 insertions(+), 1 deletion(-) create mode 100644 app/components/Header.jsx diff --git a/app/components/Header.jsx b/app/components/Header.jsx new file mode 100644 index 0000000..19c1bc8 --- /dev/null +++ b/app/components/Header.jsx @@ -0,0 +1,14 @@ +import { Link } from "@remix-run/react" +import { CiDollar } from "react-icons/ci" +export default function Header() { + return ( +
+ +

+ + Finance Manager +

+ +
+ ) +} diff --git a/app/components/Layout.jsx b/app/components/Layout.jsx index 32dbb95..466e6d3 100644 --- a/app/components/Layout.jsx +++ b/app/components/Layout.jsx @@ -1,9 +1,10 @@ import propTypes from "prop-types" +import Header from "./Header" export default function Layout({ children }) { return ( <> -

My App

+
{children} ) diff --git a/package.json b/package.json index e66d0cc..0d23430 100644 --- a/package.json +++ b/package.json @@ -20,6 +20,7 @@ "prop-types": "^15.8.1", "react": "^18.2.0", "react-dom": "^18.2.0", + "react-icons": "^4.8.0", "sass": "^1.57.1" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 09d6533..f06109b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5953,6 +5953,11 @@ react-dom@^18.2.0: loose-envify "^1.1.0" scheduler "^0.23.0" +react-icons@^4.8.0: + version "4.8.0" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.8.0.tgz#621e900caa23b912f737e41be57f27f6b2bff445" + integrity sha512-N6+kOLcihDiAnj5Czu637waJqSnwlMNROzVZMhfX68V/9bu9qHaMIJC4UdozWoOk57gahFCNHwVvWzm0MTzRjg== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" From be2fd06b8190157204df88891d10bac85efe5d14 Mon Sep 17 00:00:00 2001 From: Ayub Abdullah Date: Fri, 3 Mar 2023 14:59:17 +0300 Subject: [PATCH 03/46] creating Navbar and NavItem components --- app/components/Header.jsx | 2 ++ app/components/NavItem.jsx | 15 +++++++++++++++ app/components/Navbar.jsx | 12 ++++++++++++ 3 files changed, 29 insertions(+) create mode 100644 app/components/NavItem.jsx create mode 100644 app/components/Navbar.jsx diff --git a/app/components/Header.jsx b/app/components/Header.jsx index 19c1bc8..f270a9b 100644 --- a/app/components/Header.jsx +++ b/app/components/Header.jsx @@ -1,5 +1,6 @@ import { Link } from "@remix-run/react" import { CiDollar } from "react-icons/ci" +import Navbar from "./Navbar" export default function Header() { return (
@@ -9,6 +10,7 @@ export default function Header() { Finance Manager +
) } diff --git a/app/components/NavItem.jsx b/app/components/NavItem.jsx new file mode 100644 index 0000000..aa335b9 --- /dev/null +++ b/app/components/NavItem.jsx @@ -0,0 +1,15 @@ +import { NavLink } from "@remix-run/react" +import propTypes from "prop-types" + +export default function NavItem({ to, title }) { + return ( +
  • + {title} +
    • + ) +} + +NavItem.propTypes = { + to: propTypes.string.isRequired, + title: propTypes.string.isRequired, +} diff --git a/app/components/Navbar.jsx b/app/components/Navbar.jsx new file mode 100644 index 0000000..35a0ef5 --- /dev/null +++ b/app/components/Navbar.jsx @@ -0,0 +1,12 @@ +import NavItem from "./NavItem" + +export default function Navbar() { + return ( + + ) +} From 677e0f8b9c29e75faa8647e2386e0cae95f6919f Mon Sep 17 00:00:00 2001 From: Ayub Abdullah Date: Fri, 3 Mar 2023 16:54:20 +0300 Subject: [PATCH 04/46] adding styles to header, layout, navbar --- app/components/Header.jsx | 4 +-- app/components/Layout.jsx | 10 +++--- app/components/NavItem.jsx | 4 ++- app/components/Navbar.jsx | 2 +- app/styles/root.css | 57 +++++++++++++++++++++++++++++++- styles/_global.scss | 6 +++- styles/components/_header.scss | 21 ++++++++++++ styles/components/_layout.scss | 10 ++++++ styles/components/_nav-item.scss | 9 +++++ styles/components/_navbar.scss | 7 ++++ styles/pages/_index.scss | 5 +++ 11 files changed, 125 insertions(+), 10 deletions(-) create mode 100644 styles/components/_header.scss create mode 100644 styles/components/_layout.scss create mode 100644 styles/components/_nav-item.scss create mode 100644 styles/components/_navbar.scss diff --git a/app/components/Header.jsx b/app/components/Header.jsx index f270a9b..d4f1366 100644 --- a/app/components/Header.jsx +++ b/app/components/Header.jsx @@ -5,8 +5,8 @@ export default function Header() { return (
    -

    - +

    + Finance Manager

    diff --git a/app/components/Layout.jsx b/app/components/Layout.jsx index 466e6d3..a654e66 100644 --- a/app/components/Layout.jsx +++ b/app/components/Layout.jsx @@ -3,10 +3,12 @@ import Header from "./Header" export default function Layout({ children }) { return ( - <> -
    - {children} - +
    +
    +
    +
    +
    {children}
    +
    ) } diff --git a/app/components/NavItem.jsx b/app/components/NavItem.jsx index aa335b9..b4a6a61 100644 --- a/app/components/NavItem.jsx +++ b/app/components/NavItem.jsx @@ -4,7 +4,9 @@ import propTypes from "prop-types" export default function NavItem({ to, title }) { return (
  • - {title} + + {title} +
    • ) } diff --git a/app/components/Navbar.jsx b/app/components/Navbar.jsx index 35a0ef5..dab8fc1 100644 --- a/app/components/Navbar.jsx +++ b/app/components/Navbar.jsx @@ -3,7 +3,7 @@ import NavItem from "./NavItem" export default function Navbar() { return (