From 3d4277adcc4db167f677fc1a4bc6bbdafb848b78 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 18 Apr 2023 21:29:54 +0900 Subject: [PATCH] feat: implement header --- package.json | 2 + src/components/Header/Header.module.css | 0 src/components/Header/Header.tsx | 41 ++++++++++++++++++++ src/components/Header/index.ts | 1 + src/components/Navbar/Navbar.module.css | 0 src/components/Navbar/Navbar.tsx | 38 ++++++++++++++++++ src/components/Navbar/index.ts | 1 + src/components/icons/LogosIcon/LogosIcon.tsx | 28 +++++++++++++ src/components/icons/LogosIcon/index.ts | 1 + src/components/icons/MoonIcon/MoonIcon.tsx | 20 ++++++++++ src/components/icons/MoonIcon/index.ts | 1 + src/components/icons/SunIcon/SunIcon.tsx | 20 ++++++++++ src/components/icons/SunIcon/index.ts | 1 + src/layouts/HeaderLayout/Header.layout.tsx | 10 ++++- src/pages/_app.tsx | 21 ++++++---- src/pages/index.tsx | 12 ++++-- tsconfig.json | 1 + yarn.lock | 4 +- 18 files changed, 188 insertions(+), 14 deletions(-) create mode 100644 src/components/Header/Header.module.css create mode 100644 src/components/Header/Header.tsx create mode 100644 src/components/Header/index.ts create mode 100644 src/components/Navbar/Navbar.module.css create mode 100644 src/components/Navbar/Navbar.tsx create mode 100644 src/components/Navbar/index.ts create mode 100644 src/components/icons/LogosIcon/LogosIcon.tsx create mode 100644 src/components/icons/LogosIcon/index.ts create mode 100644 src/components/icons/MoonIcon/MoonIcon.tsx create mode 100644 src/components/icons/MoonIcon/index.ts create mode 100644 src/components/icons/SunIcon/SunIcon.tsx create mode 100644 src/components/icons/SunIcon/index.ts diff --git a/package.json b/package.json index d413f46..4f0df3d 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,8 @@ }, "dependencies": { "@acid-info/lsd-react": "^0.1.0-alpha.2", + "@emotion/react": "^11.10.6", + "@emotion/styled": "^11.10.6", "@hookstate/core": "^4.0.1", "@tanstack/react-query": "^4.29.1", "@types/node": "18.15.11", diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx new file mode 100644 index 0000000..038fd52 --- /dev/null +++ b/src/components/Header/Header.tsx @@ -0,0 +1,41 @@ +import { Tag, Typography } from "@acid-info/lsd-react"; +import styled from "@emotion/styled"; + +export default function Header() { + return ( + + + LOGOS →{" "} + + PRESS ENGINE + + + + Blog with media written by Logos members + + + Privacy + Security + Liberty + + + ); +} + +const Container = styled.div` + padding: 16px; +`; + +const Title = styled(Typography)` + white-space: nowrap; +`; + +const Description = styled(Typography)` + margin-top: 6px; +`; + +const Tags = styled.div` + display: flex; + gap: 8px; + margin-top: 16px; +`; diff --git a/src/components/Header/index.ts b/src/components/Header/index.ts new file mode 100644 index 0000000..2d31985 --- /dev/null +++ b/src/components/Header/index.ts @@ -0,0 +1 @@ +export { default as Header } from './Header'; \ No newline at end of file diff --git a/src/components/Navbar/Navbar.module.css b/src/components/Navbar/Navbar.module.css new file mode 100644 index 0000000..e69de29 diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx new file mode 100644 index 0000000..f620deb --- /dev/null +++ b/src/components/Navbar/Navbar.tsx @@ -0,0 +1,38 @@ +import styled from "@emotion/styled"; +import { LogosIcon } from "../icons/LogosIcon"; +import { IconButton, Typography } from "@acid-info/lsd-react"; +import { MoonIcon } from "../icons/MoonIcon"; +import { SunIcon } from "../icons/SunIcon"; + +export default function Navbar({ isDark }: { isDark: boolean }) { + return ( + + + + + {isDark ? : } + + + Aa + + + + ); +} + +const Container = styled.div` + display: flex; + padding: 8px; + align-items: center; + justify-content: space-between; + border-bottom: 1px solid rgb(var(--lsd-theme-primary)); +`; + +const Icons = styled.div` + display: flex; + align-items: center; +`; + +const Selector = styled(IconButton)` + border-left: none; +`; diff --git a/src/components/Navbar/index.ts b/src/components/Navbar/index.ts new file mode 100644 index 0000000..2fc16d5 --- /dev/null +++ b/src/components/Navbar/index.ts @@ -0,0 +1 @@ +export { default as Navbar } from './Navbar'; \ No newline at end of file diff --git a/src/components/icons/LogosIcon/LogosIcon.tsx b/src/components/icons/LogosIcon/LogosIcon.tsx new file mode 100644 index 0000000..4cd70d2 --- /dev/null +++ b/src/components/icons/LogosIcon/LogosIcon.tsx @@ -0,0 +1,28 @@ +import { LsdIcon } from "@acid-info/lsd-react"; + +export const LogosIcon = LsdIcon( + (props) => ( + + + + + + ), + { filled: true } +); diff --git a/src/components/icons/LogosIcon/index.ts b/src/components/icons/LogosIcon/index.ts new file mode 100644 index 0000000..fe3d982 --- /dev/null +++ b/src/components/icons/LogosIcon/index.ts @@ -0,0 +1 @@ +export * from './LogosIcon' diff --git a/src/components/icons/MoonIcon/MoonIcon.tsx b/src/components/icons/MoonIcon/MoonIcon.tsx new file mode 100644 index 0000000..13f9158 --- /dev/null +++ b/src/components/icons/MoonIcon/MoonIcon.tsx @@ -0,0 +1,20 @@ +import { LsdIcon } from "@acid-info/lsd-react"; + +export const MoonIcon = LsdIcon( + (props) => ( + + + + ), + { filled: true } +); diff --git a/src/components/icons/MoonIcon/index.ts b/src/components/icons/MoonIcon/index.ts new file mode 100644 index 0000000..478589b --- /dev/null +++ b/src/components/icons/MoonIcon/index.ts @@ -0,0 +1 @@ +export * from './MoonIcon' diff --git a/src/components/icons/SunIcon/SunIcon.tsx b/src/components/icons/SunIcon/SunIcon.tsx new file mode 100644 index 0000000..89b6419 --- /dev/null +++ b/src/components/icons/SunIcon/SunIcon.tsx @@ -0,0 +1,20 @@ +import { LsdIcon } from "@acid-info/lsd-react"; + +export const SunIcon = LsdIcon( + (props) => ( + + + + ), + { filled: true } +); diff --git a/src/components/icons/SunIcon/index.ts b/src/components/icons/SunIcon/index.ts new file mode 100644 index 0000000..d73c918 --- /dev/null +++ b/src/components/icons/SunIcon/index.ts @@ -0,0 +1 @@ +export * from './SunIcon' diff --git a/src/layouts/HeaderLayout/Header.layout.tsx b/src/layouts/HeaderLayout/Header.layout.tsx index 48653c0..70349a8 100644 --- a/src/layouts/HeaderLayout/Header.layout.tsx +++ b/src/layouts/HeaderLayout/Header.layout.tsx @@ -1,5 +1,13 @@ +import { Header } from "@/components/Header"; +import { Navbar } from "@/components/Navbar"; import { Autocomplete } from "@acid-info/lsd-react"; export default function HeaderLayout() { - return ; + return ( + <> + +
+ + + ); } diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 2248fda..21a7b64 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -1,10 +1,14 @@ -import { defaultThemes, ThemeProvider } from '@acid-info/lsd-react' -import { css, Global } from '@emotion/react' -import type { AppProps } from 'next/app' -import { useState } from 'react' +import { + defaultThemes, + ThemeProvider, + ThemeContext, +} from "@acid-info/lsd-react"; +import { css, Global } from "@emotion/react"; +import type { AppProps } from "next/app"; +import { useState } from "react"; export default function App({ Component, pageProps }: AppProps) { - const [isDark, setIsDark] = useState(true) + const [isDark, setIsDark] = useState(false); return ( @@ -14,9 +18,12 @@ export default function App({ Component, pageProps }: AppProps) { html, body { background: rgb(var(--lsd-surface-primary)); + margin: 0; + width: 100%; + height: 100%; } `} /> - ) -} \ No newline at end of file + ); +} diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 614c8f0..838485b 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,11 +1,15 @@ -import { HeaderLayout } from '@/layouts/HeaderLayout' -import Head from 'next/head' +import { HeaderLayout } from "@/layouts/HeaderLayout"; +import Head from "next/head"; + export default function Home() { return ( <> Logos Press Engine - + @@ -13,5 +17,5 @@ export default function Home() { - ) + ); } diff --git a/tsconfig.json b/tsconfig.json index 61c19ab..537dba9 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -14,6 +14,7 @@ "isolatedModules": true, "jsx": "preserve", "incremental": true, + "types": ["@emotion/react/types/css-prop"], "paths": { "@/*": ["./src/*"] } diff --git a/yarn.lock b/yarn.lock index d226a24..bb7dcbe 100644 --- a/yarn.lock +++ b/yarn.lock @@ -109,7 +109,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.0.tgz#f580f9beb67176fa57aae70b08ed510e1b18980f" integrity sha512-G/YwXTkv7Den9mXDO7AhLWkE3q+I92B+VqAE+dYG4NGPaHZGvt3G8Q0p9vmE+sq7rTGphUbAvmQ9YpbfMQGGlA== -"@emotion/react@^11.10.5": +"@emotion/react@^11.10.5", "@emotion/react@^11.10.6": version "11.10.6" resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.10.6.tgz#dbe5e650ab0f3b1d2e592e6ab1e006e75fd9ac11" integrity sha512-6HT8jBmcSkfzO7mc+N1L9uwvOnlcGoix8Zn7srt+9ga0MjREo6lRpuVX0kzo6Jp6oTqDhREOFsygN6Ew4fEQbw== @@ -139,7 +139,7 @@ resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.2.1.tgz#0767e0305230e894897cadb6c8df2c51e61a6c2c" integrity sha512-zxRBwl93sHMsOj4zs+OslQKg/uhF38MB+OMKoCrVuS0nyTkqnau+BM3WGEoOptg9Oz45T/aIGs1qbVAsEFo3nA== -"@emotion/styled@^11.10.5": +"@emotion/styled@^11.10.5", "@emotion/styled@^11.10.6": version "11.10.6" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.10.6.tgz#d886afdc51ef4d66c787ebde848f3cc8b117ebba" integrity sha512-OXtBzOmDSJo5Q0AFemHCfl+bUueT8BIcPSxu0EGTpGk6DmI5dnhSzQANm1e1ze0YZL7TDyAyy6s/b/zmGOS3Og==