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==