text: import StatusCard from 'components/StatusCard';
  import ChartLine from 'components/ChartLine';
  import ChartBar from 'components/ChartBar';
  import PageVisitsCard from 'components/PageVisitsCard';
  import TrafficCard from 'components/TrafficCard';
  import { useEffect } from 'react';
  import { getUser } from './DashboardSlice';
  import { useDispatch, useSelector } from 'react-redux';
  
  export const Dashboard = () => {
      // const state = useSelector(state => state.dashboard)
      // let dispatch = useDispatch()
      // useEffect(async () => {
      //     let id = localStorage.getItem("id")
      //     dispatch(getUser(id))
      // }, [])
  
      // useEffect(() => {
      //     console.log(state);
      // }, [state])
  
      return (
          <>
              <div className="bg-light-blue-500 px-3 md:px-8 h-40" />
  
              <div className="px-3 md:px-8 -mt-24">
                  <div className="container mx-auto max-w-full">
                      <div className="grid grid-cols-1 xl:grid-cols-5">
                          <div className="xl:col-start-1 xl:col-end-4 px-4 mb-14">
                              <ChartLine />
                          </div>
                          <div className="xl:col-start-4 xl:col-end-6 px-4 mb-14">
                              <ChartBar />
                          </div>
                      </div>
                  </div>
              </div>
  
              <div className="px-3 md:px-8">
                  <div className="container mx-auto max-w-full">
                      <div className="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 mb-4">
                          <StatusCard
                              color="pink"
                              icon="trending_up"
                              title="Traffic"
                              amount="350,897"
                              percentage="3.48"
                              percentageIcon="arrow_upward"
                              percentageColor="green"
                              date="Since last month"
                          />
                          <StatusCard
                              color="orange"
                              icon="groups"
                              title="New Users"
                              amount="2,356"
                              percentage="3.48"
                              percentageIcon="arrow_downward"
                              percentageColor="red"
                              date="Since last week"
                          />
                          <StatusCard
                              color="purple"
                              icon="paid"
                              title="Sales"
                              amount="924"
                              percentage="1.10"
                              percentageIcon="arrow_downward"
                              percentageColor="orange"
                              date="Since yesterday"
                          />
                          <StatusCard
                              color="blue"
                              icon="poll"
                              title="Performance"
                              amount="49,65%"
                              percentage="12"
                              percentageIcon="arrow_upward"
                              percentageColor="green"
                              date="Since last month"
                          />
                      </div>
                  </div>
              </div>
  
              <div className="px-3 md:px-8 h-auto">
                  <div className="container mx-auto max-w-full">
                      <div className="grid grid-cols-1 xl:grid-cols-5">
                          <div className="xl:col-start-1 xl:col-end-4 px-4 mb-14">
                              <PageVisitsCard />
                          </div>
                          <div className="xl:col-start-4 xl:col-end-6 px-4 mb-14">
                              <TrafficCard />
                          </div>
                      </div>
                  </div>
              </div>
          </>
      );
  }
  