ToggleButton

import { useT } from '@iffday/i18n';
import { ToggleButton } from '@iffday/ui';
import { CalendarPlus, Eye, Heart } from 'lucide-react';
import { useState } from 'react';

/** The three marks beside the poster on a film page. */
export default function Example() {
  const t = useT();
  const [watched, setWatched] = useState(false);
  const [wanted, setWanted] = useState(true);
  const [planned, setPlanned] = useState(false);
  return (
    <div className="release-toggles" style={{ width: 'min(100%, 300px)' }}>
      <ToggleButton className="release-toggle" pressed={watched} onPressedChange={setWatched}>
        <Eye size={22} />
        <span>{watched ? t('film.entry.watched') : t('film.entry.markWatched')}</span>
      </ToggleButton>
      <ToggleButton className="release-toggle" pressed={wanted} onPressedChange={setWanted}>
        <Heart size={22} fill={wanted ? 'currentColor' : 'none'} />
        <span>{wanted ? t('film.entry.onWatchlist') : t('film.entry.watchlist')}</span>
      </ToggleButton>
      <ToggleButton className="release-toggle" pressed={planned} onPressedChange={setPlanned}>
        <CalendarPlus size={22} />
        <span>{planned ? t('film.entry.inPlan') : t('film.entry.addToPlan')}</span>
      </ToggleButton>
    </div>
  );
}