React

by dipeshbeckham

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/umd/lucide-react.umd.production.js"></script>
<div id="app"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

li {
  margin: 8px 0;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

.done {
  color: rgba(0, 0, 0, 0.3);
  text-decoration: line-through;
}

input {
  margin-right: 5px;
}

React

const { Heart, MessageCircle, Send, Bookmark, MoreHorizontal, ChevronLeft, ChevronRight, Play } = lucideReact;

const sampleMedia = [
  {
    type: 'image',
    url: '/api/placeholder/1200/630',
    originalWidth: 1200,
    originalHeight: 630,
  },
  {
    type: 'image',
    url: '/api/placeholder/1080/1080',
    originalWidth: 1080,
    originalHeight: 1080,
  },
  {
    type: 'video',
    url: '/api/placeholder/1080/1350',
    thumbnail: '/api/placeholder/1080/1350',
    originalWidth: 1080,
    originalHeight: 1350,
  }
];

const InstagramPost = () => {
  const [currentIndex, setCurrentIndex] = React.useState(0);
  const [isLiked, setIsLiked] = React.useState(false);
  const [isSaved, setIsSaved] = React.useState(false);
  const [likes, setLikes] = React.useState(1234);
  const videoRefs = React.useRef({});
  
  const baseAspectRatio = sampleMedia[0].originalWidth / sampleMedia[0].originalHeight;
  const paddingPercentage = (1 / baseAspectRatio) * 100;

  const handleNext = () => {
    setCurrentIndex((prev) => (prev + 1) % sampleMedia.length);
  };

  const handlePrev = () => {
    setCurrentIndex((prev) => (prev - 1 + sampleMedia.length) % sampleMedia.length);
  };

  const handleLike = () => {
    setIsLiked(!isLiked);
    setLikes(isLiked ? likes - 1 : likes + 1);
  };

  const getMediaStyles = (mediaItem) => {
    const itemAspectRatio = mediaItem.originalWidth / mediaItem.originalHeight;
    
    if (itemAspectRatio > baseAspectRatio) {
      return {
        height: '100%',
        width: 'auto',
        position: 'absolute',
        left: '50%',
        transform: 'translateX(-50%)'
      };
    } else {
      return {
        width: '100%',
        height: 'auto',
        position: 'absolute',
        top: '50%',
        transform: 'translateY(-50%)'
      };
    }
  };

  const MediaItem = ({ item, index }) => {
    const style = getMediaStyles(item);

    if (item.type === 'video') {
      return (
        <div className="absolute inset-0">
       ...