feat: layout and dark mode switch

chore: move to npm

src/renderer/src/App.tsx

@@ -1,14 +1,10 @@
-import { useState } from 'react'
-
 import { View } from './components/view/view'
 import { Layout } from './layout'
 
 function App() {
-  const [fileName, setFileName] = useState<string>('')
-
   return (
-    <Layout fileName={fileName}>
-      <View setFileName={setFileName} />
+    <Layout>
+      <View />
     </Layout>
   )
 }

src/renderer/src/components/file-selector/index.ts

@@ -0,0 +1 @@
+export * from './file-selector'

src/renderer/src/components/view/view.tsx

@@ -6,10 +6,10 @@ import { ImagePreview } from '@it-incubator/ui-kit'
 
 import s from './view.module.scss'
 
-import { FileOrDirectory, MdxFileSelector } from '../file-selector/file-selector'
+import { FileOrDirectory, MdxFileSelector } from '../file-selector'
 import { TableOfContents } from '../toc'
 
-export const View = ({ setFileName }) => {
+export const View = () => {
   const [selectedFile, setSelectedFile] = useState<string>('')
   const [code, setCode] = useState<string>('')
   const [toc, setToc] = useState<any>({})
@@ -29,9 +29,10 @@ export const View = ({ setFileName }) => {
 
   useEffect(() => {
     const contentListener: IpcRendererListener = (_event, content) => {
-      if (!content) return
+      if (!content) {
+        return
+      }
       setCode(content?.code)
-      setFileName(content?.fileName)
       setSelectedFile(content?.fileName)
       setToc(content?.toc)
     }

src/renderer/src/layout/layout.module.scss

@@ -34,3 +34,16 @@
     padding: 0 16px;
   }
 }
+
+.header {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  padding-inline: 20px;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}

src/renderer/src/layout/layout.tsx

@@ -1,14 +1,13 @@
 import { ReactNode, useState } from 'react'
 
-import { Button, Header, Scrollbar, Typography } from '@it-incubator/ui-kit'
+import { Header, Scrollbar, Toggle } from '@it-incubator/ui-kit'
 
 import s from './layout.module.scss'
 
 type Props = {
   children: ReactNode
-  fileName: string
 }
-export const Layout = ({ children, fileName }: Props) => {
+export const Layout = ({ children }: Props) => {
   const [isDark, setIsDark] = useState<boolean>(false)
 
   const handleThemeChanged = () => {
@@ -18,9 +17,11 @@ export const Layout = ({ children, fileName }: Props) => {
 
   return (
     <>
-      <Header>
-        <Typography.H1>{fileName}</Typography.H1>
-        <Button onClick={() => handleThemeChanged()}>Toggle theme</Button>
+      <Header className={s.header}>
+        <div className={s.toggle}>
+          Темная тема
+          <Toggle checked={isDark} onCheckedChange={handleThemeChanged} />
+        </div>
       </Header>
       <Scrollbar className={s.scrollbar}>
         <main className={s.main}>{children}</main>