ছবির ফিড

ছবি সোয়াইপ করুন, থাম্বনেইল দিয়ে লাফান, যেকোনো ছবি পুরো স্ক্রিনে খুলুন আর তার বিস্তারিত ওপরে টানুন।

MotionPagerMotionHighlightMotionZoomMotionSheet

উদাহরণ প্রস্তুত হচ্ছে…

JavaScript বন্ধ আছে। নিচের কোডই পুরো উদাহরণ।

App.jsx

import { useState } from 'react';
import {
  MotionHighlight,
  MotionPager,
  MotionSheet,
  MotionZoom,
  motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';

// Generated scenes, so the example needs no image files.
function scene(sky, land, sun) {
  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400 260">
    <rect width="400" height="260" fill="${sky}"/>
    <circle cx="300" cy="80" r="34" fill="${sun}"/>
    <path d="M0 190 Q120 110 220 180 T400 150 V260 H0Z" fill="${land}"/>
    <path d="M0 225 Q150 170 260 215 T400 205 V260 H0Z" fill="#0e2e24"/>
  </svg>`;
  return `data:image/svg+xml,${encodeURIComponent(svg)}`;
}

const photos = [
  {
    id: 'dawn',
    title: 'Dawn ridge',
    place: 'North trail',
    src: scene('#eaf6f0', '#43c58f', '#ffffff'),
  },
  {
    id: 'forest',
    title: 'Deep forest',
    place: 'Valley road',
    src: scene('#176b52', '#2e8f6d', '#eaf6f0'),
  },
  {
    id: 'meadow',
    title: 'Meadow',
    place: 'South field',
    src: scene('#cfe8dc', '#176b52', '#f4faf7'),
  },
  {
    id: 'night',
    title: 'Night hills',
    place: 'Lookout',
    src: scene('#0e2e24', '#176b52', '#43c58f'),
  },
];

export default function App({ gap = 12, spring = 'default' }) {
  const [page, setPage] = useState(0);
  const [details, setDetails] = useState(false);
  // "default" is not a preset: undefined keeps the component's own motion.
  const transition = motionTokens.spring[spring];
  const photo = photos[page];

  return (
    <div className="feed">
      <MotionPager
        items={photos}
        index={page}
        onIndexChange={setPage}
        gap={gap}
        transition={transition}
        renderItem={(item) => (
          <MotionZoom
            src={item.src}
            width={400}
            height={260}
            className="photo"
            transition={transition}
          />
        )}
      />
      <div className="bar">
        <MotionHighlight
          items={photos}
          value={photo.id}
          onValueChange={(key) => setPage(photos.findIndex((item) => item.id === key))}
          transition={transition}
          className="thumbs"
          itemClassName="thumb"
          highlightClassName="thumb-on"
          renderItem={(item) => <img src={item.src} width={48} height={32} />}
        />
        <button className="info" onClick={() => setDetails(true)}>
          Details
        </button>
      </div>
      <MotionSheet open={details} onOpenChange={setDetails} className="sheet">
        <span className="handle" />
        <h2>{photo.title}</h2>
        <p>
          {photo.place} · photo {page + 1} of {photos.length}
        </p>
        <button onClick={() => setDetails(false)}>Close</button>
      </MotionSheet>
    </div>
  );
}

styles.css

.feed {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  max-width: 560px;
  min-height: 420px;
  margin: 0 auto;
  padding: 24px 20px;
  align-content: start;
}

.photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 400 / 260;
  border-radius: 18px;
  object-fit: cover;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

/* On a narrow phone the thumbnails shrink; the Details button keeps its size. */
.thumbs {
  display: flex;
  min-width: 0;
  gap: 6px;
}

.thumb {
  flex: 0 1 auto;
  min-width: 0;
  padding: 3px;
  border: 0;
  border-radius: 10px;
  background: none;
  cursor: pointer;
}

.thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 7px;
}

.thumb-on {
  border-radius: 10px;
  box-shadow: inset 0 0 0 2px #176b52;
}

.info {
  flex: none;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid #cfe8dc;
  border-radius: 999px;
  background: #fff;
  font:
    600 14px system-ui,
    sans-serif;
  cursor: pointer;
}

.sheet {
  gap: 6px;
  padding: 12px 22px 22px;
  border-radius: 22px 22px 0 0;
  background: #fff;
  box-shadow: 0 -8px 30px rgba(14, 46, 36, 0.18);
}

.handle {
  justify-self: center;
  width: 44px;
  height: 5px;
  border-radius: 3px;
  background: #cfe8dc;
}

.sheet h2 {
  margin: 6px 0 0;
  font:
    750 22px system-ui,
    sans-serif;
  color: #0e2e24;
}

.sheet p {
  margin: 0;
  color: #5b616b;
}

.sheet button {
  min-height: 46px;
  margin-top: 12px;
  border: 0;
  border-radius: 999px;
  background: #176b52;
  color: #fff;
  font:
    650 15px system-ui,
    sans-serif;
  cursor: pointer;
}

এটি কীভাবে কাজ করে

MotionPager প্রতিটি সোয়াইপ বা ঝটকায় একটি পাতা ওল্টায়।
MotionHighlight বর্তমান থাম্বনেইল চিহ্নিত করে আর পেজার সরায়।
MotionZoom ছবিটি তার জায়গা থেকে খোলে; বন্ধ করতে দূরে টানুন।
MotionSheet বিস্তারিত দেখায় আর টানা, ব্যাকড্রপ বা Escape-এ বন্ধ হয়।

ছবির ফিড

এটি কীভাবে কাজ করে

আরও উদাহরণ

খুঁজুন