Untitled

import { useParams } from 'react-router-dom';
import { useTimeLine } from './useTimeLine';
import { useSchedule } from './useSchedule';

import { Days } from './Days';

// Timeline
import { ScheduleTimeLine } from "./ScheduleTimeLine"

export const Schedule = (props) => {
  const { id } = useParams();

  const { schedule, dates, handleSetDay, currentDay, totalDays } = useSchedule({ id });
  const { data } = useTimeLine({ id, date: dates[currentDay] });

  const { start_date, end_date } = schedule || {};
 
  
  return (
    <div>
      <title >Vancouver</title>
      <div id="root"></div>

      <h1 className="trip_location">Vancouver</h1>
     
      <h3>Day</h3>
        <Days  
          daysCount={totalDays} 
          handleChange={handleSetDay} 
          currentDay={currentDay}
        />
      <h3 className="travel_dates">
       {start_date ? `${start_date} - ${end_date}` :  'Loading...'}
      </h3>
      {/* pagination */}
      
      <div className="timeline" />

      <section className="itinerary_day">
        <div className="add">
          <button><i className="bi bi-plus"></i></button>
        </div>

      {data.map((trip) => {
        <h1>{trip.name}</h1>
      })}
        {/* <ScheduleTimeLine
         data={data}

        /> */}
        
        <div>
          {/* { data.map((elem)=> {
            return (
              <div key={elem.id}>
                {elem.id},
                {elem.place_id},
                {elem.destination_id},
                {elem.start_date},
                {elem.end_date},
                {elem.start_time},
                {elem.end_time}
              </div>
            )

          })} */}
        </div>
      </section>
      </div>
  );

}

// travel time - random math time give it 15min, 30min, 45min, etc.




ScheduleCard.jsx:
// card
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

export default function (prop) {
  const { 
    start_time, 
    end_time, 
    place_description, 
    thumbnail_img_url, 
    cover_photo_url, 
    google_map_link,
    name  
  } = prop

  return (
    <Card sx={{ maxWidth: 500 }}>
      <CardMedia
        component="img"
        alt="stanley park"
        height="500"
        image={cover_photo_url}
      />

      <CardContent>
        <Typography gutterBottom variant="h3" component="div" >
          {name}
        </Typography>
        <Typography variant="h5" color="text.secondary">
          {place_description}
          <span />
          <a><i className="bi bi-pencil" /></a>
        </Typography>
      </CardContent>

      <CardActions>
        <a className="map_button"src={google_map_link} size="large"><i className="bi bi-map"></i></a>
        <Button size="large"><i className="bi bi-trash"></i></Button>
      </CardActions>
    </Card>
  )
};


____

ScheduleTimeLine.jsx file:


// Timeline
import Timeline from '@mui/lab/Timeline';
import TimelineItem from '@mui/lab/TimelineItem';
import TimelineSeparator from '@mui/lab/TimelineSeparator';
import TimelineConnector from '@mui/lab/TimelineConnector';
import TimelineContent from '@mui/lab/TimelineContent';
import TimelineDot from '@mui/lab/TimelineDot';
import TimelineOppositeContent, {
  timelineOppositeContentClasses,
} from '@mui/lab/TimelineOppositeContent';

// card
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';

import ScheduleCard from './ScheduleCard';
export const ScheduleTimeLine = (prop) => {
const { data } = prop
// console.log('data', data)


  return (
    <Timeline
      sx={{
        [`& .${timelineOppositeContentClasses.root}`]: {
          flex: 0.2,
        },
      }}
    >
      
      {/* Item */}
      {data.map((trip) => {
      <TimelineItem 
        key={trip.trip_id}
      >
        <TimelineOppositeContent color="textSecondary">
          {trip.start_time}
        </TimelineOppositeContent>
        <TimelineSeparator>
          <TimelineDot />
          <TimelineConnector />
        </TimelineSeparator>
        <TimelineContent>
        <h1>{trip}</h1>
          {/* import schedule card */}
          <Card sx={{ maxWidth: 345 }}>
            <CardMedia
              component="img"
              alt="fairmont hotel"
              height="300"
              image={trip.cover_photo_url}
            />

            <CardContent>
              <Typography gutterBottom variant="h5" component="div">
                {trip.name}
              </Typography>
              <Typography variant="body2" color="text.secondary">
               {trip.place_description}
                <span />
                <a><i className="bi bi-pencil" /></a>
              </Typography>
            </CardContent>

            <CardActions>
              <Button size="small"><i className="bi bi-map"></i></Button>
              <Button size="small"><i className="bi bi-trash"></i></Button>
            </CardActions>
          </Card>

        </TimelineContent>
      </TimelineItem>
      })}

    </Timeline>
  );
};