feat(styles): add and remove some components and change some styles

SalamLang · Dec 19, 2024 · aaef18f · aaef18f
1 parent b78cd40
commit aaef18f
Show file tree

Hide file tree

Showing 10 changed files with 138 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
     <title>سلام - ادیتور</title>
     <link rel="stylesheet" href="./src/styles/style.css">
   </head>
-  <body>
+  <body class="bg-[#ff5b00]/5">
     <div id="root"></div>
     <script type="module" src="/src/main.jsx"></script>
   </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -11,7 +11,8 @@
   },
   "dependencies": {
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^7.0.2"
   },
   "devDependencies": {
     "@eslint/js": "^9.17.0",

diff --git a/src/components/editor/Editor.jsx b/src/components/editor/Editor.jsx
@@ -0,0 +1,10 @@
+const Editor = () => {
+
+    return (<>
+        <main className={"w-[calc(100%-50px)] h-[calc(100vh-35px)] bg-[#FFF1E9] rounded-tr-[15px] after:inline-block after:border-0 after:z-[-1] after:w-[30px] after:h-[30px] after:bg-[#ffdecc] after:absolute relative after:top-0 after:right-0"}>
+
+        </main>
+    </>)
+}
+
+export default Editor;
diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx
@@ -0,0 +1,9 @@
+const Header = () => {
+
+    return (<>
+        <header className={"header bg-[#ffdecc] h-[35px] w-[100vw]"}>
+        </header>
+    </>)
+}
+
+export default Header
diff --git a/src/components/shared/Container.jsx b/src/components/shared/Container.jsx
@@ -0,0 +1,11 @@
+// eslint-disable-next-line react/prop-types
+const Container = ({ children }) => {
+
+    return (<>
+       <div className="grid_container">
+           { children }
+       </div>
+    </>)
+}
+
+export default Container;
diff --git a/src/components/sidebar/Side.jsx b/src/components/sidebar/Side.jsx
@@ -0,0 +1,10 @@
+const Side = () => {
+
+    return (<>
+        <aside className={"side bg-[#ffdecc] w-[50px] h-[calc(100vh-35px)] float-end"}>
+
+        </aside>
+    </>)
+}
+
+export default Side
diff --git a/src/layouts/EditorLayout.jsx b/src/layouts/EditorLayout.jsx
@@ -0,0 +1,14 @@
+import Header from "../components/header/Header.jsx";
+import Side from "../components/sidebar/Side.jsx";
+import Editor from "../components/editor/Editor.jsx";
+
+const EditorLayout = () => {
+
+    return (<>
+        <Header />
+        <Side />
+        <Editor />
+    </>)
+}
+
+export default EditorLayout;
diff --git a/src/main.jsx b/src/main.jsx
@@ -1,5 +1,11 @@
 import { createRoot } from 'react-dom/client'
+import {BrowserRouter, Route, Routes} from "react-router-dom";
+import EditorLayout from "./layouts/EditorLayout.jsx";
 
 createRoot(document.getElementById('root')).render(<>
-
+    <BrowserRouter>
+        <Routes>
+            <Route path="/" element={ <EditorLayout /> } />
+        </Routes>
+    </BrowserRouter>
 </>)
diff --git a/src/styles/style.css b/src/styles/style.css
@@ -1,3 +1,7 @@
 @tailwind base;
 @tailwind components;
-@tailwind utilities;
+@tailwind utilities;
+
+@layer base {
+
+}