Container Components

index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
    monospace;
}

:root {
  --main-container-color: #fef3c7;
  --main-border-color: #e5e7eb;

  --main-background-color: #10b981;
  --secondary-background-color: #f9fafb;
  --secondary-background-color-light: #fff;

  --main-font-color: #374151;
  --secondary-font-color: #f3f4f6;
  --danger-font-color: #ef4444;
  --label-font-color: #6366f1;

  --main-box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px,
    rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
  --main-box-shadow-elevated: rgba(17, 17, 26, 0.1) 0px 8px 24px,
    rgba(17, 17, 26, 0.1) 0px 16px 56px, rgba(17, 17, 26, 0.1) 0px 24px 80px;
  --main-box-shadow-inset: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

Create folder Components/Navbar.

index.jsx

import React from "react";
import styles from "./Navbar.module.css"

import searchIcon from '../../assets/search-icon.svg'
import emojiIcon from '../../assets/emoji-icon.svg'

const Navbar = () => {
    return(
        <nav className={styles.nav}>
            <img style={{ marginRight: 8 }} className={styles.navIcon} src={emojiIcon} alt="emoji icon" />
            <img style={{ marginTop: 3 }} className={styles.navIcon} src={searchIcon} alt="search icon" />
            <span className={styles.navTitle}> er </span>
        </nav>
    )

}

export default Navbar

Navbar.module.css

.nav {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: var(--main-background-color);
    padding: 0 16px;
    height: 55px;
}

.navTitle {
    color: var(--secondary-font-color);
    font-size: 24px;
    font-weight: bold;
}

.navIcon {
    height: 32px;
    width: 32px;
}

Container create folder

index.jsx

import React from "react";

import PropTypes from 'prop-types';
import styles from './Container.module.css';

const Container = ({ children }) => {
    return(
        <section className={styles.container}>
            {children}
        </section>
    )
}

Container.propTypes = {
    children: PropTypes.node
}

export default Container

Container.module.css

.container {
    display: flex;
    flex-direction: column;

    min-height: calc(100vh = 50px);
    max-width: 480px;
    padding: 16px;
    margin: 0 auto;
    background-color: var(--main-container-color);
}

App.js

import React from 'react';
import { useState, useEffect } from 'react';
import axios from 'axios';

import Navbar from './Components/Navbar'
import Container from './Components/Container';

import './App.css';

function App() {
  const [emojisData, setEmojisData] = useState([]);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(false)


  useEffect(() => {
    async function fetchEmojis() {
      setLoading(true)

      try {
        const res = await axios.get('https://run.mocky.io/v3/fe964130-70d0-430f-b839-e55081423c28')
        setEmojisData(res.data)
        setLoading(false) 

      } catch (error) {
        console.error(error)

        setError(true)
        setLoading(false) 
      }

    }

    fetchEmojis()
  }, [])

  return (
    <>
      <Navbar />
      <Container>
        <h1>Hello</h1>

        {loading && <p>Loading..</p>}
        {error && <p>Opsss Error....</p>}
        {emojisData.length > 0 && <p>Data sukses di ambil</p>}
      </Container>
      
    </>
  );
}

export default App;