text: import React from "react";
  
  // components
  
  import CardLineChart from "components/Cards/CardLineChart.js";
  import CardBarChart from "components/Cards/CardBarChart.js";
  import CardPageVisits from "components/Cards/CardPageVisits.js";
  import CardSocialTraffic from "components/Cards/CardSocialTraffic.js";
  import CardInput from "components/Cards/CardInput.js";
  
  const Alert = () => {
    const [showAlert, setShowAlert] = React.useState(true);
    return (
      <>
        {showAlert ? (
          <div
            className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-red-400"
          >
            <span className="text-xl inline-block mr-5 align-middle">
              <i className="fas fa-bell" />
            </span>
            <span className="align-middle mr-8">
              <b className="capitalize"> Red!</b> This is a red alert -
              check it out!
            </span>
            <button
              className="absolute bg-transparent text-2xl font-semibold leading-none right-0 top-0 mt-4 mr-6 outline-none focus:outline-none"
              onClick={() => setShowAlert(false)}
            >
              <span>×</span>
            </button>
          </div>
        ) : null}
      </>
    );
  };
  
  export default function Dashboard() {
    return (
      <>
        <div className="w-full xl:w-11/12 xl:mb-0 px-4"><Alert /></div>
        <div><CardInput /></div>
        <div className="flex flex-wrap">
          <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
            <CardLineChart />
          </div>
          <div className="w-full xl:w-4/12 px-4">
            <CardBarChart />
          </div>
        </div>
        <div className="flex flex-wrap mt-4">
          <div className="w-full xl:w-8/12 mb-12 xl:mb-0 px-4">
            <CardPageVisits />
          </div>
          <div className="w-full xl:w-4/12 px-4">
            <CardSocialTraffic />
          </div>
        </div>
      </>
    );
  }
  