feat: setup basic layout with bottom bar

2025-02-22 09:12:04 +00:00 · 2022-07-14 00:53:35 +05:30 · 2022-07-14 00:53:35 +05:30 · 870cabfa51
commit 870cabfa51
parent 247ccbf363
10 changed files with 260 additions and 45 deletions
--- a/index.html
+++ b/index.html
@ -2,7 +2,7 @@
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/src/favicon.svg" />
+    <link rel="icon" type="image/png" href="/src/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Okiba</title>
  </head>
--- a/package.json
+++ b/package.json
@ -14,8 +14,8 @@
  },
  "devDependencies": {
    "@types/react": "^18.0.0",
-    "@types/react-router-dom": "^5.3.3",
    "@types/react-dom": "^18.0.0",
+    "@types/react-router-dom": "^5.3.3",
    "@vitejs/plugin-react": "^1.3.0",
    "typescript": "^4.6.3",
    "vite": "^2.9.9"
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -5,14 +5,18 @@ specifiers:
  '@types/react-dom': ^18.0.0
  '@types/react-router-dom': ^5.3.3
  '@vitejs/plugin-react': ^1.3.0
+  codemirror: ^6.0.1
  react: ^18.0.0
+  react-codemirror2: ^7.2.1
  react-dom: ^18.0.0
  react-router-dom: ^6.3.0
  typescript: ^4.6.3
  vite: ^2.9.9

 dependencies:
+  codemirror: 6.0.1
  react: 18.2.0
+  react-codemirror2: 7.2.1_zuovgz2ulb34y4plqf6p2rpz4q
  react-dom: 18.2.0_react@18.2.0
  react-router-dom: 6.3.0_biqbaboplfbrettd7655fr4n2y

@ -294,6 +298,63 @@ packages:
      to-fast-properties: 2.0.0
    dev: true

+  /@codemirror/autocomplete/6.0.4:
+    resolution: {integrity: sha512-uP7UodCRykPNwSAN+wYa/AS9gJI/V47echCAXUYgCgBXy3l19nwO7W/d29COtG/dfAsjBOhMDeh3Ms8Y5VZbrA==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/commands/6.0.1:
+    resolution: {integrity: sha512-iNHDByicYqQjs0Wo1MKGfqNbMYMyhS9WV6EwMVwsHXImlFemgEUC+c5X22bXKBStN3qnwg4fArNZM+gkv22baQ==}
+    dependencies:
+      '@codemirror/language': 6.2.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@codemirror/language/6.2.0:
+    resolution: {integrity: sha512-tabB0Ef/BflwoEmTB4a//WZ9P90UQyne9qWB9YFsmeS4bnEqSys7UpGk/da1URMXhyfuzWCwp+AQNMhvu8SfnA==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      '@lezer/common': 1.0.0
+      '@lezer/highlight': 1.0.0
+      '@lezer/lr': 1.2.0
+      style-mod: 4.0.0
+    dev: false
+
+  /@codemirror/lint/6.0.0:
+    resolution: {integrity: sha512-nUUXcJW1Xp54kNs+a1ToPLK8MadO0rMTnJB8Zk4Z8gBdrN0kqV7uvUraU/T2yqg+grDNR38Vmy/MrhQN/RgwiA==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/search/6.0.0:
+    resolution: {integrity: sha512-rL0rd3AhI0TAsaJPUaEwC63KHLO7KL0Z/dYozXj6E7L3wNHRyx7RfE0/j5HsIf912EE5n2PCb4Vg0rGYmDv4UQ==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+      crelt: 1.0.5
+    dev: false
+
+  /@codemirror/state/6.1.0:
+    resolution: {integrity: sha512-qbUr94DZTe6/V1VS7LDLz11rM/1t/nJxR1El4I6UaxDEdc0aZZvq6JCLJWiRmUf95NRAnDH6fhXn+PWp9wGCIg==}
+    dev: false
+
+  /@codemirror/view/6.0.3:
+    resolution: {integrity: sha512-1gDBymhbx2DZzwnR/rNUu1LiQqjxBJtFiB+4uLR6tHQ6vKhTIwUsP5uZUQ7SM7JxVx3UihMynnTqjcsC+mczZg==}
+    dependencies:
+      '@codemirror/state': 6.1.0
+      style-mod: 4.0.0
+      w3c-keyname: 2.2.4
+    dev: false
+
  /@jridgewell/gen-mapping/0.1.1:
    resolution: {integrity: sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==}
    engines: {node: '>=6.0.0'}
@ -332,6 +393,22 @@ packages:
      '@jridgewell/sourcemap-codec': 1.4.14
    dev: true

+  /@lezer/common/1.0.0:
+    resolution: {integrity: sha512-ohydQe+Hb+w4oMDvXzs8uuJd2NoA3D8YDcLiuDsLqH+yflDTPEpgCsWI3/6rH5C3BAedtH1/R51dxENldQceEA==}
+    dev: false
+
+  /@lezer/highlight/1.0.0:
+    resolution: {integrity: sha512-nsCnNtim90UKsB5YxoX65v3GEIw3iCHw9RM2DtdgkiqAbKh9pCdvi8AWNwkYf10Lu6fxNhXPpkpHbW6mihhvJA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
+  /@lezer/lr/1.2.0:
+    resolution: {integrity: sha512-TgEpfm9br2SX8JwtwKT8HsQZKuFkLRg6g+IRxObk9nVKQLKnkP3oMh+QGcTBL9GQsfQ2ADtKPbj2iGSMf3ytiA==}
+    dependencies:
+      '@lezer/common': 1.0.0
+    dev: false
+
  /@rollup/pluginutils/4.2.1:
    resolution: {integrity: sha512-iKnFXr7NkdZAIHiIWE+BX5ULi/ucVFYWD6TbAV+rZctiRTY2PL6tsIKhoIOaoskiWAkgu+VsbXgUVDNLHf+InQ==}
    engines: {node: '>= 8.0.0'}
@ -428,6 +505,18 @@ packages:
      supports-color: 5.5.0
    dev: true

+  /codemirror/6.0.1:
+    resolution: {integrity: sha512-J8j+nZ+CdWmIeFIGXEFbFPtpiYacFMDR8GlHK3IyHQJMCaVRfGx9NT+Hxivv1ckLWPvNdZqndbr/7lVhrf/Svg==}
+    dependencies:
+      '@codemirror/autocomplete': 6.0.4
+      '@codemirror/commands': 6.0.1
+      '@codemirror/language': 6.2.0
+      '@codemirror/lint': 6.0.0
+      '@codemirror/search': 6.0.0
+      '@codemirror/state': 6.1.0
+      '@codemirror/view': 6.0.3
+    dev: false
+
  /color-convert/1.9.3:
    resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
    dependencies:
@ -444,6 +533,10 @@ packages:
      safe-buffer: 5.1.2
    dev: true

+  /crelt/1.0.5:
+    resolution: {integrity: sha512-+BO9wPPi+DWTDcNYhr/W90myha8ptzftZT+LwcmUbbok0rcP/fequmFYCw8NMoH7pkAZQzU78b3kYrlua5a9eA==}
+    dev: false
+
  /csstype/3.1.0:
    resolution: {integrity: sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==}
    dev: true
@ -790,6 +883,16 @@ packages:
      source-map-js: 1.0.2
    dev: true

+  /react-codemirror2/7.2.1_zuovgz2ulb34y4plqf6p2rpz4q:
+    resolution: {integrity: sha512-t7YFmz1AXdlImgHXA9Ja0T6AWuopilub24jRaQdPVbzUJVNKIYuy3uCFZYa7CE5S3UW6SrSa5nAqVQvtzRF9gw==}
+    peerDependencies:
+      codemirror: 5.x
+      react: '>=15.5 <=16.x'
+    dependencies:
+      codemirror: 6.0.1
+      react: 18.2.0
+    dev: false
+
  /react-dom/18.2.0_react@18.2.0:
    resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==}
    peerDependencies:
@ -874,6 +977,10 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

+  /style-mod/4.0.0:
+    resolution: {integrity: sha512-OPhtyEjyyN9x3nhPsu76f52yUGXiZcgvsrFVtvTkyGRQJ0XK+GPc6ov1z+lRpbeabka+MYEQxOYRnt5nF30aMw==}
+    dev: false
+
  /supports-color/5.5.0:
    resolution: {integrity: sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==}
    engines: {node: '>=4'}
@ -931,3 +1038,7 @@ packages:
    optionalDependencies:
      fsevents: 2.3.2
    dev: true
+
+  /w3c-keyname/2.2.4:
+    resolution: {integrity: sha512-tOhfEwEzFLJzf6d1ZPkYfGj+FWhIpBux9ppoP3rlclw3Z0BZv3N7b7030Z1kYth+6rDuAsXUFr+d0VE6Ed1ikw==}
+    dev: false
--- a/src/App.tsx
+++ b/src/App.tsx
@ -1,17 +1,19 @@
-import {BrowserRouter as Router, Routes, Route} from 'react-router-dom';
-import Home from './pages/Home';
-import Paste from './pages/Paste';
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
+import Home from "./pages/Home";
+import Paste from "./pages/Paste";

 function App() {
 	return (
-    <Router>
-    <div className='App'>
-      <Routes>
-        <Route path="/" element={<Home />}/>
-        <Route path="/:id" element={<Paste />}/>
-      </Routes>
-    </div>
-    </Router>
+		<Router>
+			<div
+				className="App"
+				style={{ display: "flex", flexDirection: "column", height: "100vh" }}>
+				<Routes>
+					<Route path="/" element={<Home />} />
+					<Route path="/:id" element={<Paste />} />
+				</Routes>
+			</div>
+		</Router>
 	);
 }

--- a/src/components/BottomBar.tsx
+++ b/src/components/BottomBar.tsx
@ -0,0 +1,76 @@
+const BottomBar = () => {
+	return (
+		<div
+			style={{
+				height: "5vh",
+				minHeight: "30px",
+				background: "#0B0E14",
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "space-between",
+				paddingInline: "20px",
+				justifySelf: "end",
+			}}
+			className="BottomBar">
+			<a
+				style={{
+					fontSize: "1.1rem",
+					color: "#D9F8C4",
+					cursor: "pointer",
+					textDecoration: "none",
+				}}
+				href="/">
+				<b>Okiba</b> v1.0
+			</a>
+			<ul
+				className="controls"
+				style={{
+					display: "flex",
+					justifyItems: "center",
+					marginBottom: "2px",
+				}}>
+				<ButtonControl text="raw" link="/" />
+				<Separator />
+				<ButtonControl text="save" link="/" />
+				<Separator />
+				<ButtonControl text="source" link="/" />
+			</ul>
+		</div>
+	);
+};
+
+const ButtonControl = (props: tControlProps) => {
+	return (
+		<a
+			href={props.link}
+			style={{
+				color: "white",
+			}}>
+			<li
+				style={{
+					marginInline: "10px",
+					listStyle: "none",
+					fontSize: "1rem",
+				}}>
+				{props.text}
+			</li>
+		</a>
+	);
+};
+
+const Separator = () => (
+	<div
+		style={{
+			fontSize: "1rem",
+			color: "#839496",
+		}}>
+		•
+	</div>
+);
+
+interface tControlProps {
+	text: string;
+	link: string;
+}
+
+export default BottomBar;
--- a/src/components/Editor.tsx
+++ b/src/components/Editor.tsx
@ -0,0 +1,21 @@
+const Editor = () => {
+	return (
+		<textarea
+			className="editor"
+			autoFocus={true}
+			style={{
+				width: "auto",
+				backgroundColor: "black",
+				padding: "10px",
+				resize: "none",
+				borderWidth: 0,
+				flex: 1,
+				color: "#fbfbfb",
+				fontSize: 16,
+				outline: "none",
+			}}
+		/>
+	);
+};
+
+export default Editor;
--- a/src/index.css
+++ b/src/index.css
@ -1,13 +1,14 @@
-body {
-  margin: 0;
-  font-family: sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  background: black;
-  color: white;
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;700&display=swap');
+
+* {
+  padding: 0%;
+  margin: 0%;
 }

-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}
+body{
+  font-family: "IBM Plex Mono", monospace;
+  background: black;
+  color: white;
+  /* min-height: 100%; */
+  height: 100vh;
+}
--- a/src/main.tsx
+++ b/src/main.tsx
@ -1,10 +1,10 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";

-ReactDOM.createRoot(document.getElementById('root')!).render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-)
+ReactDOM.createRoot(document.getElementById("root")!).render(
+	<React.StrictMode>
+		<App />
+	</React.StrictMode>,
+);
--- a/src/pages/Home.tsx
+++ b/src/pages/Home.tsx
@ -1,9 +1,13 @@
+import BottomBar from "../components/BottomBar";
+import Editor from "../components/Editor";
+
 function Home() {
-    return (
-        <div className="container">
-            <h1>Home Page</h1>
-        </div>
-    )
+	return (
+		<>
+			<Editor />
+			<BottomBar />
+		</>
+	);
 }

-export default Home;
+export default Home;
--- a/src/pages/Paste.tsx
+++ b/src/pages/Paste.tsx
@ -1,9 +1,9 @@
 function Paste() {
-    return (
-        <div className="container">
-            <h1>Paste Page</h1>
-        </div>
-    )
+	return (
+		<div className="container">
+			<h1>Paste Page</h1>
+		</div>
+	);
 }

-export default Paste;
+export default Paste;