tabs basic UI

src/App.tsx

@@ -1,8 +1,10 @@
+import { Home } from "./components/home/Home";
 import { Tabs } from "./components/tabs/Tabs";
 
 function App() {
     return (
         <main>
+            <Home />
             <Tabs />
         </main>
     );

src/assets/icons/book.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-h</title><path d="M202.24,74C166.11,56.75,115.61,48.3,48,48h0a31.36,31.36,0,0,0-17.92,5.33A32,32,0,0,0,16,79.9V366c0,19.34,13.76,33.93,32,33.93,71.07,0,142.36,6.64,185.06,47a4.11,4.11,0,0,0,6.94-3V106.82a15.89,15.89,0,0,0-5.46-12A143,143,0,0,0,202.24,74Z"/><path d="M481.92,53.3A31.33,31.33,0,0,0,464,48h0c-67.61.3-118.11,8.71-154.24,26a143.31,143.31,0,0,0-32.31,20.78,15.93,15.93,0,0,0-5.45,12V443.91a3.93,3.93,0,0,0,6.68,2.81c25.67-25.5,70.72-46.82,185.36-46.81a32,32,0,0,0,32-32v-288A32,32,0,0,0,481.92,53.3Z"/></svg>

src/assets/icons/grid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><rect x="48" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="288" y="48" width="176" height="176" rx="20" ry="20" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="48" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="288" y="288" width="176" height="176" rx="20" ry="20" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

src/assets/icons/home.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-i</title><path d="M80,212V448a16,16,0,0,0,16,16h96V328a24,24,0,0,1,24-24h80a24,24,0,0,1,24,24V464h96a16,16,0,0,0,16-16V212" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><path d="M480,256,266.89,52c-5-5.28-16.69-5.34-21.78,0L32,256" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><polyline points="400 179 400 64 352 64 352 133" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

src/assets/icons/more.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-f</title><circle cx="256" cy="256" r="32" style="fill:none;stroke-miterlimit:10;stroke-width:32px"/><circle cx="416" cy="256" r="32" style="fill:none;stroke-miterlimit:10;stroke-width:32px"/><circle cx="96" cy="256" r="32" style="fill:none;stroke-miterlimit:10;stroke-width:32px"/></svg>

src/assets/icons/stats.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"><title>ionicons-v5-q</title><rect x="64" y="320" width="48" height="160" rx="8" ry="8" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="288" y="224" width="48" height="256" rx="8" ry="8" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="400" y="112" width="48" height="368" rx="8" ry="8" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/><rect x="176" y="32" width="48" height="448" rx="8" ry="8" style="fill:none;stroke-linecap:round;stroke-linejoin:round;stroke-width:32px"/></svg>

src/assets/styles/common.scss

@@ -0,0 +1,6 @@
+.page {
+    width: 100vw;
+    height: 100vh;
+    background-color: var(--creamy-white);
+    overflow: auto;
+}

src/components/home/Home.module.scss

@@ -0,0 +1 @@
+@import '../../assets/styles/common.scss';

src/components/home/Home.tsx

@@ -0,0 +1,6 @@
+import React from "react";
+import styles from './Home.module.scss';
+
+export const Home: React.FC = () => {
+    return <section className={styles.page}></section>
+}

src/components/tabs/Tabs.module.scss

@@ -0,0 +1,72 @@
+$tab-width: 95vw;
+
+.tabs {
+    position: fixed;
+    bottom: 10px;
+    width: $tab-width;
+    left: calc((100vw - #{$tab-width}) / 2);
+    display: flex;
+    background-color: white;
+    border-radius: 1.5rem;
+    box-shadow: 0px 0px 10px -5px var(--grey);
+    height: 5rem;
+    align-items: center;
+    justify-content: center;
+
+    button {
+        width: calc(#{$tab-width} / 5);
+        border: none;
+        background-color: transparent;
+        position: relative;
+
+        &::before {
+            content: '';
+            position: absolute;
+            left: calc(50% - 2.5px);
+            bottom: -2px;
+            width: 5px;
+            height: 5px;
+            border-radius: 50%;
+            background-color: var(--teal);
+            opacity: 0;
+            transition: opacity 0.3s;
+        }        
+
+        svg {
+            width: 1.8rem;
+            height: 1.8rem;
+            stroke: var(--grey);
+            transition: transform 0.3s;
+        }
+
+        &.active {
+            &::before {
+                opacity: 1;
+            }
+
+            svg {
+                stroke: var(--teal);
+                transform: translateY(-2px);
+            }
+        }
+    }
+
+    .utility {
+        width: calc(#{$tab-width} / 5);
+
+        button {
+            box-shadow: 0px 0px 10px -2px var(--grey);
+            width: 5rem;
+            height: 5rem;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 0 auto;
+            
+            svg {
+                fill: var(--red);
+            }
+        }
+    }
+}

src/components/tabs/Tabs.tsx

@@ -1,6 +1,29 @@
 import React from "react";
 import styles from './Tabs.module.scss';
+import { ReactComponent as HomeIcon } from '../../assets/icons/home.svg';
+import { ReactComponent as GridIcon } from '../../assets/icons/grid.svg';
+import { ReactComponent as BookIcon } from '../../assets/icons/book.svg';
+import { ReactComponent as StatsIcon } from '../../assets/icons/stats.svg';
+import { ReactComponent as MoreIcon } from '../../assets/icons/more.svg';
 
 export const Tabs: React.FC = () => {
-    return <h1 className={styles.header}> Tabs </h1>
+    return <section className={styles.tabs}>
+        <button className={styles.active}>
+            <HomeIcon />
+        </button>
+        <button>
+            <GridIcon />
+        </button>
+        <div className={styles.utility}>
+            <button>
+                <BookIcon />
+            </button>
+        </div>
+        <button>
+            <StatsIcon />
+        </button>
+        <button>
+            <MoreIcon />
+        </button>
+    </section>
 }

src/index.css

@@ -13,6 +13,9 @@
     --orange: #f1be83;
     --red: #d47077;
     --blue: #668fe1;
+    --teal: #4e9096;
     --black: #11253d;
     --grey: #586471;
+    --creamy-white: #fef8ec;
+    font-size: 62.5%;
 }