From 3d1e0ddb33ab4e1b6d62e3979891bd43fe91283f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tadeusz=20Miesi=C4=85c?= <tadeusz.miesiac@gmail.com>
Date: Thu, 21 Sep 2023 10:54:03 +0200
Subject: [PATCH] feat(set up placeholders for layout): set up placeholders for
layout
so it's easier to work on next features
---
.../FunctionalArea/FunctionalArea.component.tsx | 17 +++++++++++++++++
.../MapNavigation/MapNavigation.component.tsx | 1 +
.../FunctionalArea/MapNavigation/index.ts | 1 +
.../FunctionalArea/NavBar/NavBar.component.tsx | 1 +
src/components/FunctionalArea/NavBar/index.ts | 1 +
.../FunctionalArea/TopBar/TopBar.component.tsx | 1 +
src/components/FunctionalArea/TopBar/index.ts | 1 +
src/components/FunctionalArea/index.ts | 1 +
src/components/SPA/MinervaSPA.component.tsx | 2 ++
9 files changed, 26 insertions(+)
create mode 100644 src/components/FunctionalArea/FunctionalArea.component.tsx
create mode 100644 src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
create mode 100644 src/components/FunctionalArea/MapNavigation/index.ts
create mode 100644 src/components/FunctionalArea/NavBar/NavBar.component.tsx
create mode 100644 src/components/FunctionalArea/NavBar/index.ts
create mode 100644 src/components/FunctionalArea/TopBar/TopBar.component.tsx
create mode 100644 src/components/FunctionalArea/TopBar/index.ts
create mode 100644 src/components/FunctionalArea/index.ts
diff --git a/src/components/FunctionalArea/FunctionalArea.component.tsx b/src/components/FunctionalArea/FunctionalArea.component.tsx
new file mode 100644
index 00000000..22043804
--- /dev/null
+++ b/src/components/FunctionalArea/FunctionalArea.component.tsx
@@ -0,0 +1,17 @@
+import { TopBar } from '@/components/FunctionalArea/TopBar';
+import { NavBar } from '@/components/FunctionalArea/NavBar';
+import { MapNavigation } from '@/components/FunctionalArea/MapNavigation';
+
+export const FunctionalArea = (): JSX.Element => (
+ <>
+ <div className="absolute top-0 left-0 z-10 w-full">
+ <TopBar />
+ </div>
+ <div className="absolute left-[88px] top-16 z-10 w-[calc(100%-88px)]">
+ <MapNavigation />
+ </div>
+ <div className="absolute top-16 left-0 z-10 h-[calc(100%-64px)] flex">
+ <NavBar />
+ </div>
+ </>
+);
diff --git a/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
new file mode 100644
index 00000000..9aaf5020
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/MapNavigation.component.tsx
@@ -0,0 +1 @@
+export const MapNavigation = (): JSX.Element => <div className="w-full h-10 bg-slate-200">.</div>;
diff --git a/src/components/FunctionalArea/MapNavigation/index.ts b/src/components/FunctionalArea/MapNavigation/index.ts
new file mode 100644
index 00000000..fd325db1
--- /dev/null
+++ b/src/components/FunctionalArea/MapNavigation/index.ts
@@ -0,0 +1 @@
+export { MapNavigation } from './MapNavigation.component';
diff --git a/src/components/FunctionalArea/NavBar/NavBar.component.tsx b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
new file mode 100644
index 00000000..ccff87b8
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/NavBar.component.tsx
@@ -0,0 +1 @@
+export const NavBar = (): JSX.Element => <div className="w-[88px] min-h-100 bg-slate-700 ">.</div>;
diff --git a/src/components/FunctionalArea/NavBar/index.ts b/src/components/FunctionalArea/NavBar/index.ts
new file mode 100644
index 00000000..045daa8a
--- /dev/null
+++ b/src/components/FunctionalArea/NavBar/index.ts
@@ -0,0 +1 @@
+export { NavBar } from './NavBar.component';
diff --git a/src/components/FunctionalArea/TopBar/TopBar.component.tsx b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
new file mode 100644
index 00000000..fd98c130
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/TopBar.component.tsx
@@ -0,0 +1 @@
+export const TopBar = (): JSX.Element => <div className="w-100 bg-slate-600 h-16">.</div>;
diff --git a/src/components/FunctionalArea/TopBar/index.ts b/src/components/FunctionalArea/TopBar/index.ts
new file mode 100644
index 00000000..7b8f65d8
--- /dev/null
+++ b/src/components/FunctionalArea/TopBar/index.ts
@@ -0,0 +1 @@
+export { TopBar } from './TopBar.component';
diff --git a/src/components/FunctionalArea/index.ts b/src/components/FunctionalArea/index.ts
new file mode 100644
index 00000000..c882de0e
--- /dev/null
+++ b/src/components/FunctionalArea/index.ts
@@ -0,0 +1 @@
+export { FunctionalArea } from './FunctionalArea.component';
diff --git a/src/components/SPA/MinervaSPA.component.tsx b/src/components/SPA/MinervaSPA.component.tsx
index afc8ac64..72989e4f 100644
--- a/src/components/SPA/MinervaSPA.component.tsx
+++ b/src/components/SPA/MinervaSPA.component.tsx
@@ -1,7 +1,9 @@
import { Map } from '@/components/Map';
+import { FunctionalArea } from '@/components/FunctionalArea';
export const MinervaSPA = (): JSX.Element => (
<div className="relative">
+ <FunctionalArea />
<Map />
</div>
);
--
GitLab