TRahulSam1997

import '../styles/globals.css'
import '../styles/index.css';
import {DataItemsProvider} from '../contexts/dataContext';

function MyApp({ Component, pageProps }) {
  return (
    <DataItemsProvider>
      <div className="bg-gray-800 pattern py-5">
          <Component {...pageProps} />
      </div>

TRahulSam1997

import Head from 'next/head';
import { table, minifyRecords } from './api/utils/airtable';
import {DataItemsContext} from '../contexts/dataContext';
import Navbar from '../components/Navbar';
import DataItem from '../components/DataItem';
import {useEffect, useContext} from 'react';

export default function Home({initialDataItems}) {

  const { dataItems, setDataItems } = useContext(DataItemsContext);

TRahulSam1997

import React from 'react'

export default function Navbar() {
    return (
        <header className="bg-white shadow border-t-4 border-indigo-600">
            <div className="container mx-auto px-6 py-4">
                <div className="flex items-center justify-between">
                    <div>
                        <a className="flex items-center text-gray-800 hover:text-indigo-600" href="#">
                            <svg className="h-6 w-6 sm:h-6 sm:w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">

TRahulSam1997

import React from 'react'

export default function DataItem({ dataItem }) {
    return (
            <div>
                <div className="m-auto mt-10 py-3">
                    <div className="bg-white shadow-2xl" >
                        <div>
                            <img src={dataItem.fields.image} />
                        </div>