Map

client/src/components/map/TabsPane/TabsPane.tsx

@@ -0,0 +1,45 @@
+import { ScrollAreaAutosize, Tabs } from '@mantine/core';
+
+export interface ITabsPane {
+    title: string;
+    value: string;
+    view: JSX.Element;
+}
+
+export interface TabsPaneProps {
+    defaultTab: string;
+    tabs: ITabsPane[];
+}
+
+const TabsPane = ({
+    defaultTab,
+    tabs
+}: TabsPaneProps) => {
+    return (
+        <Tabs defaultValue={defaultTab} mah='50%' h={'100%'} style={{
+            display: 'grid',
+            gridTemplateRows: 'min-content auto'
+        }}>
+            <ScrollAreaAutosize>
+                <Tabs.List>
+                    {tabs.map((tab) => (
+                        <Tabs.Tab key={tab.value} value={tab.value}>
+                            {tab.title}
+                        </Tabs.Tab>
+                    ))}
+                </Tabs.List>
+            </ScrollAreaAutosize>
+
+
+            <ScrollAreaAutosize h='100%' offsetScrollbars p='xs'>
+                {tabs.map(tab => (
+                    <Tabs.Panel key={tab.value} value={tab.value}>
+                        {tab.view}
+                    </Tabs.Panel>
+                ))}
+            </ScrollAreaAutosize>
+        </Tabs>
+    )
+}
+
+export default TabsPane