feat: implement header

2023-04-18 21:29:54 +09:00 · 2023-04-18 21:29:54 +09:00 · 3d4277adcc
parent 421b964366
commit 3d4277adcc
18 changed files with 188 additions and 14 deletions
--- 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",
--- a/src/components/Header/Header.module.css
+++ b/src/components/Header/Header.module.css
--- a/src/components/Header/Header.tsx
+++ 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 (
+    <Container>
+      <Typography genericFontFamily="serif" component="span" variant="h2">
+        LOGOS →{" "}
+        <Title genericFontFamily="serif" component="span" variant="h2">
+          PRESS ENGINE
+        </Title>
+      </Typography>
+      <Description component="div" variant="label2">
+        Blog with media written by Logos members
+      </Description>
+      <Tags>
+        <Tag disabled={false}>Privacy</Tag>
+        <Tag disabled={false}>Security</Tag>
+        <Tag disabled={false}>Liberty</Tag>
+      </Tags>
+    </Container>
+  );
+}
+
+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;
+`;
--- a/src/components/Header/index.ts
+++ b/src/components/Header/index.ts
@ -0,0 +1 @@
+export { default as Header } from './Header';
--- a/src/components/Navbar/Navbar.module.css
+++ b/src/components/Navbar/Navbar.module.css
--- a/src/components/Navbar/Navbar.tsx
+++ 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 (
+    <Container>
+      <LogosIcon color="primary" />
+      <Icons>
+        <IconButton size="small">
+          {isDark ? <SunIcon color="primary" /> : <MoonIcon color="primary" />}
+        </IconButton>
+        <Selector size="small">
+          <Typography variant="label2">Aa</Typography>
+        </Selector>
+      </Icons>
+    </Container>
+  );
+}
+
+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;
+`;
--- a/src/components/Navbar/index.ts
+++ b/src/components/Navbar/index.ts
@ -0,0 +1 @@
+export { default as Navbar } from './Navbar';
--- a/src/components/icons/LogosIcon/LogosIcon.tsx
+++ b/src/components/icons/LogosIcon/LogosIcon.tsx
@ -0,0 +1,28 @@
+import { LsdIcon } from "@acid-info/lsd-react";
+
+export const LogosIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="28"
+      height="28"
+      viewBox="0 0 28 28"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M21.2873 21.75H7V13.0634H21.2738L21.2873 21.75ZM14.1279 13.7603C12.9084 13.7615 11.7081 14.0595 10.6336 14.6279C9.55902 15.1963 8.64343 16.0174 7.96809 17.0183C7.87875 17.12 7.82957 17.25 7.82957 17.3845C7.82957 17.519 7.87875 17.649 7.96809 17.7507C8.64778 18.747 9.5651 19.5637 10.6396 20.1291C11.7141 20.6945 12.9129 20.9913 14.1309 20.9935C15.3489 20.9957 16.5488 20.7032 17.6254 20.1417C18.702 19.5802 19.6223 18.7668 20.3057 17.7729C20.4032 17.6655 20.4571 17.5264 20.4571 17.3823C20.4571 17.2382 20.4032 17.0991 20.3057 16.9917C19.6242 15.9948 18.704 15.1789 17.6265 14.616C16.549 14.0532 15.3473 13.7608 14.1279 13.7647V13.7603Z"
+        fill="black"
+      />
+      <path
+        d="M14.1684 12.2511C12.9568 12.2487 11.7638 11.9567 10.6917 11.4C9.61964 10.8434 8.70052 10.0388 8.01313 9.05517C7.89853 8.93499 7.83472 8.77624 7.83472 8.61129C7.83472 8.44634 7.89853 8.2876 8.01313 8.16742C8.70014 7.18557 9.61987 6.38385 10.6925 5.83189C11.7651 5.27993 12.9582 4.9944 14.1681 5.00008C15.3781 5.00577 16.5683 5.3025 17.6356 5.86452C18.7028 6.42654 19.6147 7.23685 20.2922 8.22511C20.3893 8.33181 20.4431 8.47013 20.4431 8.6135C20.4431 8.75687 20.3893 8.89519 20.2922 9.00189C19.6156 9.99268 18.7044 10.8062 17.6375 11.3723C16.5706 11.9384 15.38 12.24 14.1684 12.2511ZM16.8341 8.65567C16.8466 8.12646 16.6989 7.60557 16.4097 7.1595C16.1206 6.71344 15.7031 6.36244 15.2107 6.1513C14.7183 5.94017 14.1732 5.87847 13.645 5.97411C13.1169 6.06974 12.6296 6.31837 12.2455 6.68824C11.8613 7.05811 11.5976 7.53244 11.4882 8.05068C11.3787 8.56892 11.4284 9.10756 11.6309 9.59784C11.8334 10.0881 12.1796 10.5078 12.6251 10.8033C13.0706 11.0987 13.5954 11.2566 14.1324 11.2568C14.8381 11.257 15.5159 10.9849 16.0208 10.4988C16.5257 10.0127 16.8176 9.35118 16.8341 8.65567Z"
+        fill="black"
+      />
+      <path
+        d="M14.1413 20.0055C13.6177 19.9967 13.1084 19.8356 12.6774 19.5424C12.2463 19.2492 11.9129 18.8369 11.7188 18.3574C11.5248 17.8779 11.4788 17.3526 11.5867 16.8474C11.6946 16.3423 11.9515 15.8798 12.3253 15.5181C12.699 15.1565 13.1728 14.9118 13.6872 14.8148C14.2015 14.7178 14.7335 14.7728 15.2162 14.9729C15.699 15.1731 16.1109 15.5094 16.4004 15.9396C16.6898 16.3699 16.8438 16.8748 16.843 17.3911C16.8418 17.7382 16.7708 18.0817 16.634 18.4015C16.4972 18.7214 16.2974 19.0113 16.0461 19.2545C15.7948 19.4977 15.497 19.6893 15.17 19.8182C14.8431 19.9471 14.4934 20.0108 14.1413 20.0055Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  { filled: true }
+);
--- a/src/components/icons/LogosIcon/index.ts
+++ b/src/components/icons/LogosIcon/index.ts
@ -0,0 +1 @@
+export * from './LogosIcon'
--- a/src/components/icons/MoonIcon/MoonIcon.tsx
+++ b/src/components/icons/MoonIcon/MoonIcon.tsx
@ -0,0 +1,20 @@
+import { LsdIcon } from "@acid-info/lsd-react";
+
+export const MoonIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.46583 3.21417C5.36083 3.5875 5.30833 3.97833 5.30833 4.375C5.30833 6.755 7.245 8.69167 9.625 8.69167C10.0217 8.69167 10.4125 8.63917 10.7858 8.53417C10.1792 10.0275 8.70917 11.0833 7 11.0833C4.74833 11.0833 2.91667 9.25167 2.91667 7C2.91667 5.29083 3.9725 3.82083 5.46583 3.21417ZM7 1.75C4.10083 1.75 1.75 4.10083 1.75 7C1.75 9.89917 4.10083 12.25 7 12.25C9.89917 12.25 12.25 9.89917 12.25 7C12.25 6.73167 12.2267 6.46333 12.1917 6.20667C11.62 7.00583 10.6867 7.525 9.625 7.525C7.88667 7.525 6.475 6.11333 6.475 4.375C6.475 3.31917 6.99417 2.38 7.79333 1.80833C7.53667 1.77333 7.26833 1.75 7 1.75Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  { filled: true }
+);
--- a/src/components/icons/MoonIcon/index.ts
+++ b/src/components/icons/MoonIcon/index.ts
@ -0,0 +1 @@
+export * from './MoonIcon'
--- a/src/components/icons/SunIcon/SunIcon.tsx
+++ b/src/components/icons/SunIcon/SunIcon.tsx
@ -0,0 +1,20 @@
+import { LsdIcon } from "@acid-info/lsd-react";
+
+export const SunIcon = LsdIcon(
+  (props) => (
+    <svg
+      width="14"
+      height="14"
+      viewBox="0 0 14 14"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        d="M5.46583 3.21417C5.36083 3.5875 5.30833 3.97833 5.30833 4.375C5.30833 6.755 7.245 8.69167 9.625 8.69167C10.0217 8.69167 10.4125 8.63917 10.7858 8.53417C10.1792 10.0275 8.70917 11.0833 7 11.0833C4.74833 11.0833 2.91667 9.25167 2.91667 7C2.91667 5.29083 3.9725 3.82083 5.46583 3.21417ZM7 1.75C4.10083 1.75 1.75 4.10083 1.75 7C1.75 9.89917 4.10083 12.25 7 12.25C9.89917 12.25 12.25 9.89917 12.25 7C12.25 6.73167 12.2267 6.46333 12.1917 6.20667C11.62 7.00583 10.6867 7.525 9.625 7.525C7.88667 7.525 6.475 6.11333 6.475 4.375C6.475 3.31917 6.99417 2.38 7.79333 1.80833C7.53667 1.77333 7.26833 1.75 7 1.75Z"
+        fill="black"
+      />
+    </svg>
+  ),
+  { filled: true }
+);
--- a/src/components/icons/SunIcon/index.ts
+++ b/src/components/icons/SunIcon/index.ts
@ -0,0 +1 @@
+export * from './SunIcon'
--- 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 <Autocomplete />;
+  return (
+    <>
+      <Navbar isDark={false} />
+      <Header />
+      <Autocomplete style={{ width: "100%" }} withIcon />
+    </>
+  );
 }
--- 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 (
    <ThemeProvider theme={isDark ? defaultThemes.dark : defaultThemes.light}>
@ -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%;
          }
        `}
      />
    </ThemeProvider>
-  )
-}
+  );
+}
--- 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 (
    <>
      <Head>
        <title>Logos Press Engine</title>
-        <meta name="description" content="Blog with media written by Logos members" />
+        <meta
+          name="description"
+          content="Blog with media written by Logos members"
+        />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <link rel="icon" href="/favicon.ico" />
      </Head>
@ -13,5 +17,5 @@ export default function Home() {
        <HeaderLayout />
      </main>
    </>
-  )
+  );
 }
--- a/tsconfig.json
+++ b/tsconfig.json
@ -14,6 +14,7 @@
    "isolatedModules": true,
    "jsx": "preserve",
    "incremental": true,
+    "types": ["@emotion/react/types/css-prop"],
    "paths": {
      "@/*": ["./src/*"]
    }
--- 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==
				`@ -0,0 +1 @@`
				`export { default as Header } from './Header';`
				`@ -0,0 +1 @@`
				`export { default as Navbar } from './Navbar';`