IGQWRQTGNEdW81YS1JSTBPdzJocWFKZAzdRb3k3c29qcXMzWmFyZAWJadms0V05tb0hNenhpVlJCUVN5MDg4WkJscmxaMGJjZAGYwVHFaYXpNM0M3UWJCSjhoeDBCZAzRJcGNyUGJTMEc0dFNMTGNDdFdsRlExUGllREUZD

https://graph.instagram.com/me?fields=id,caption,media_url,timestamp,media_type,permalink&access_token=IGQWRQTGNEdW81YS1JSTBPdzJocWFKZAzdRb3k3c29qcXMzWmFyZAWJadms0V05tb0hNenhpVlJCUVN5MDg4WkJscmxaMGJjZAGYwVHFaYXpNM0M3UWJCSjhoeDBCZAzRJcGNyUGJTMEc0dFNMTGNDdFdsRlExUGllREUZD



import React, { useEffect, useState } from 'react'
import axios from 'axios'
import { Container,Row,Col } from 'react-bootstrap';
import styles from './instafeed.module.css';

export default function Instafeeds() {

    const [post, setpost] = useState([]);

    useEffect(() => {

        const accessToken = 'IGQWRQTGNEdW81YS1JSTBPdzJocWFKZAzdRb3k3c29qcXMzWmFyZAWJadms0V05tb0hNenhpVlJCUVN5MDg4WkJscmxaMGJjZAGYwVHFaYXpNM0M3UWJCSjhoeDBCZAzRJcGNyUGJTMEc0dFNMTGNDdFdsRlExUGllREUZD'
        axios.get(`https://graph.instagram.com/v12.0/me/media?fields=id,media_url,caption,permalink&access_token=${accessToken}`)
            .then((response) => {
                setpost(response.data.data);
            })
            .catch((error) => {
                console.error("erron in instagram post")
            })
    }, [])

    return (
        <div className ="container">
            <div className='row'>
                <h4 className={styles.text}>Follow us on Instagram</h4>
               {post.slice(0,6).map((post) => (
                <div className='col-md-2  mb-1 ' key={post.id}>
                    <div className={styles.imagecontainer}>
                    <a 
                       href={post.permalink} 
                       target='blank' 
                       rel='noopener noreferrer'>

                 <div className={styles.hovercontent}  >
                    <div className={styles.imghover}>
                    <img className='img-thumbnail ' 
                    src={post.media_url} 
                    alt={post.caption} />
                    </div>
                    

                </div>
                </a>
                </div>
                <p>{post.caption}</p>
                </div>
            ))}
</div>

</div>
    )
}






.boxcontainer{
    position: relative;
    border: 1px solid #ddd;
    overflow: hidden;
    height: 100%;
    
 }
 .imagecontainer{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    
 }
 

 .imghover:hover{
     opacity:0.7;
 }
 
 .hovercontent{
    background-color: rgb(187, 184, 185);
     opacity: 1;
 
 }
 
 .text{
    text-align: center;
    margin-top: 20px;
    margin-bottom: 10px;
    font-family:Cambria;
 }
 


import React, { useEffect, useState } from "react";
import {
  addDays,
  endOfDay,
  startOfDay,
  startOfMonth,
  endOfMonth,
  addMonths,
  startOfWeek,
  endOfWeek,
  isSameDay,
  differenceInCalendarDays,
} from "date-fns";
import "bootstrap/dist/css/bootstrap.min.css";
import axios from "axios";
import Dropdown from "react-bootstrap/Dropdown";
import DropdownButton from "react-bootstrap/DropdownButton";
import Button from "react-bootstrap/Button";
import {
  DateRangePicker,
  defaultStaticRanges,
  createStaticRanges,
} from "react-date-range";
import "react-date-range/dist/styles.css"; // main style file
import "react-date-range/dist/theme/default.css"; // theme css file
export default function Sales() {
  const [calenderClick, setcalenderClick] = useState(false);
const [ranges, setRanges] = useState([
    {
      startDate: null,
      endDate: null,
      key: "rollup",
    },
  ]);
  const defineds = {
    startOfWeek: startOfWeek(new Date()),
    endOfWeek: endOfWeek(new Date()),
    startOfLastWeek: startOfWeek(addDays(new Date(), -7)),
    endOfLastWeek: endOfWeek(addDays(new Date(), -7)),
    startOfToday: startOfDay(new Date()),
    endOfToday: endOfDay(new Date()),
    startOfYesterday: startOfDay(addDays(new Date(), -1)),
    endOfYesterday: endOfDay(addDays(new Date(), -1)),
    startOfMonth: startOfMonth(new Date()),
    endOfMonth: endOfMonth(new Date()),
    startOfLastMonth: startOfMonth(addMonths(new Date(), -1)),
    endOfLastMonth: endOfMonth(addMonths(new Date(), -1)),
  };
  function calenderOnClick(e) {
    setcalenderClick(!calenderClick);
  }
const staticRanges = createStaticRanges([
    {
      label: "Today",
      range: () => ({
        startDate: defineds.startOfToday,
        endDate: defineds.endOfToday,
      }),
    },
    {
      label: "This Month",
      range: () => ({
        startDate: defineds.startOfMonth,
        endDate: defineds.endOfMonth,
      }),
    },
    {
      label: "Last Month",
      range: () => ({
        startDate: defineds.startOfLastMonth,
        endDate: defineds.endOfLastMonth,
      }),
    },
  ]);

  return (
 <span>Sales</span>
              </div>
              {/* <div className="d-flex ml-auto my-2 my-lg-0 float-right listnav"> */}
              {/* <Button variant="light" onClick={handleExportcsv}>Export Products</Button> */}
              {/* <DropdownButton id="dropdown-basic-button" title="Today">
                  <Dropdown.Item href="#/action-1">This Week</Dropdown.Item>
                  <Dropdown.Item href="#/action-2">This Month</Dropdown.Item>
                  <Dropdown.Item href="#/action-3">Custom Range</Dropdown.Item>
                </DropdownButton> */}
              <div>
                <Button
                  type="button"
                  class="btn btn-primary"
                  title="Date Picker"
                  onClick={calenderOnClick}
                >
                  Date Picker {""} <i class="fa-solid fa-calendar-days"></i>
                </Button>

                {calenderClick && (
                  <div className="Datepicker">
                   <div>
      <DateRangePicker
        startDatePlaceholder="Start Date"
        endDatePlaceholder="End Date"
        rangeColors={[theme.palette.primary.main]}
        ranges={ranges}
        onChange={(ranges) => setRanges([ranges.rollup])}
        staticRanges={staticRanges}
        inputRanges={[]}
      />
      <button type="submit" className="date-submit-btn">
        Submit
      </button>
    </div>
    </div>
                )})}











{`mt-3 ml-3 custom-input ${styles.bottomButton}`}