From 16d408a8d4ed535bab8cc8938bb9232244a01e27 Mon Sep 17 00:00:00 2001 From: "Kalle (Sendou)" <38327916+Sendouc@users.noreply.github.com> Date: Mon, 25 Oct 2021 13:54:14 +0300 Subject: [PATCH] Nav Header initial --- packages/frontend/assets/img/logo.png | Bin 0 -> 10656 bytes .../frontend/components/common/Avatar.tsx | 5 ++ .../frontend/components/common/Button.tsx | 16 +++++ .../frontend/components/common/TextInput.tsx | 38 +++++++++++ packages/frontend/components/layout.tsx | 60 +++++++++++++----- packages/frontend/package-lock.json | 15 +++++ packages/frontend/package.json | 1 + packages/frontend/pages/_app.css | 6 +- packages/frontend/pages/_app.tsx | 1 + 9 files changed, 125 insertions(+), 17 deletions(-) create mode 100644 packages/frontend/assets/img/logo.png create mode 100644 packages/frontend/components/common/Avatar.tsx create mode 100644 packages/frontend/components/common/Button.tsx create mode 100644 packages/frontend/components/common/TextInput.tsx diff --git a/packages/frontend/assets/img/logo.png b/packages/frontend/assets/img/logo.png new file mode 100644 index 0000000000000000000000000000000000000000..2c8400d795b93226e7edb12695f5b44e60edd9d1 GIT binary patch literal 10656 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 literal 0 HcmV?d00001 diff --git a/packages/frontend/components/common/Avatar.tsx b/packages/frontend/components/common/Avatar.tsx new file mode 100644 index 000000000..d25b47f8b --- /dev/null +++ b/packages/frontend/components/common/Avatar.tsx @@ -0,0 +1,5 @@ +import { Avatar as MantineAvatar } from "@mantine/core"; + +export function Avatar({ src }: { src: string }) { + return ; +} diff --git a/packages/frontend/components/common/Button.tsx b/packages/frontend/components/common/Button.tsx new file mode 100644 index 000000000..9ee4e31cb --- /dev/null +++ b/packages/frontend/components/common/Button.tsx @@ -0,0 +1,16 @@ +import { Button as MantineButton } from "@mantine/core"; +import { ReactNode } from "react"; + +export function Button({ + children, + icon, +}: { + children: ReactNode; + icon: ReactNode; +}) { + return ( + + {children} + + ); +} diff --git a/packages/frontend/components/common/TextInput.tsx b/packages/frontend/components/common/TextInput.tsx new file mode 100644 index 000000000..840f5d9a9 --- /dev/null +++ b/packages/frontend/components/common/TextInput.tsx @@ -0,0 +1,38 @@ +import { TextInput as MantineTextInput } from "@mantine/core"; +import { createStyles, MantineSize } from "@mantine/styles"; +import { ReactNode } from "react"; + +const useStyles = createStyles(() => ({ + input: { + backgroundColor: "var(--colors-bg-lighter)", + color: "var(--colors-text)", + fontWeight: 500, + fontSize: "0.9rem", + "::placeholder": { + color: "var(--colors-text-lighter)", + }, + }, +})); + +export function TextInput({ + placeholder, + icon, + size, +}: { + placeholder: string; + icon?: ReactNode; + size?: MantineSize; +}) { + const { classes } = useStyles(); + return ( + + ); +} diff --git a/packages/frontend/components/layout.tsx b/packages/frontend/components/layout.tsx index 58ddcdecf..ec40ed7c3 100644 --- a/packages/frontend/components/layout.tsx +++ b/packages/frontend/components/layout.tsx @@ -1,28 +1,58 @@ import styled from "@emotion/styled"; import { ReactNode } from "react"; +import { HiChevronDown, HiSearch } from "react-icons/hi"; +import { TextInput } from "./common/TextInput"; +import NextImage from "next/image"; +import logo from "../assets/img/logo.png"; +import { Avatar } from "./common/Avatar"; +import { Button } from "./common/Button"; -const _Button = styled.button` - padding: 32px; - background-color: hotpink; - font-size: 24px; - border-radius: 4px; - color: black; - font-weight: bold; - &:hover { - color: white; +const _Header = styled.header` + display: grid; + grid-template-columns: 1fr 1fr 1fr; + align-items: center; + padding: 1rem; + + & > :first-child { + justify-self: flex-start; + } + + & > :last-child { + justify-self: flex-end; } `; -const Container = styled.div` - background-color: var(--bg); +const _RightContainer = styled.div` + display: flex; + gap: 1rem; +`; + +const _LogoContainer = styled.div` + background-color: var(--colors-bg-lighter); + display: grid; + place-items: center; + padding: 0.25rem; + border-radius: 16px; `; export function Layout({ children }: { children: ReactNode }) { return ( - -
sendou.ink
- <_Button>hello + <> + <_Header> + <_LogoContainer> + + + } + size="md" + /> + <_RightContainer> + + + +
{children}
- + ); } diff --git a/packages/frontend/package-lock.json b/packages/frontend/package-lock.json index 05f8d55c8..4aaa0d059 100644 --- a/packages/frontend/package-lock.json +++ b/packages/frontend/package-lock.json @@ -13,6 +13,7 @@ "next": "^11.1.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", "swr": "^1.0.1" }, "devDependencies": { @@ -3583,6 +3584,14 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" }, + "node_modules/react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -7090,6 +7099,12 @@ "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.0.tgz", "integrity": "sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==" }, + "react-icons": { + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-4.3.1.tgz", + "integrity": "sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==", + "requires": {} + }, "react-is": { "version": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", diff --git a/packages/frontend/package.json b/packages/frontend/package.json index 3901f0131..876e35a30 100644 --- a/packages/frontend/package.json +++ b/packages/frontend/package.json @@ -14,6 +14,7 @@ "next": "^11.1.2", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", "swr": "^1.0.1" }, "devDependencies": { diff --git a/packages/frontend/pages/_app.css b/packages/frontend/pages/_app.css index a29a6b9a0..c9be3731c 100644 --- a/packages/frontend/pages/_app.css +++ b/packages/frontend/pages/_app.css @@ -1,6 +1,8 @@ :root { - --colors-bg: #2d306f; - --colors-text: rgba(255, 255, 255, 0.85); + --colors-bg: hsl(237.3, 42.3%, 30.6%); + --colors-bg-lighter: hsl(237.3, 42.3%, 35.6%); + --colors-text: rgba(255, 255, 255, 0.95); + --colors-text-lighter: rgba(255, 255, 255, 0.55); } *, diff --git a/packages/frontend/pages/_app.tsx b/packages/frontend/pages/_app.tsx index 42917b0a7..cd6fe70f4 100644 --- a/packages/frontend/pages/_app.tsx +++ b/packages/frontend/pages/_app.tsx @@ -22,6 +22,7 @@ export default function App(props: AppProps) {