JavaScript is off. The code below is the complete example.
App.jsximport { useState } from 'react';
import {
MotionHighlight,
MotionList,
MotionNumber,
MotionSwipe,
motionTokens,
} from '@kkwaenggwari/animated-chorus';
import './styles.css';
const start = [
{ id: 1, from: 'Design team', subject: 'Motion tokens are ready', unread: true },
{ id: 2, from: 'Build bot', subject: 'All checks passed', unread: false },
{ id: 3, from: 'Hana', subject: 'Lunch on Friday?', unread: true },
{ id: 4, from: 'Support', subject: 'Your export is complete', unread: false },
{ id: 5, from: 'Jun', subject: 'Notes from the review', unread: true },
];
export default function App({ effect = 'slide', spring = 'default' }) {
const [mail, setMail] = useState(start);
const [filter, setFilter] = useState('all');
const transition = motionTokens.spring[spring];
const unread = mail.filter((message) => message.unread).length;
const tabs = [
{ id: 'all', label: 'All', count: mail.length },
{ id: 'unread', label: 'Unread', count: unread },
];
const visible = filter === 'all' ? mail : mail.filter((message) => message.unread);
const archive = (id) => setMail(mail.filter((message) => message.id !== id));
const toggleRead = (id) =>
setMail(
mail.map((message) =>
message.id === id ? { ...message, unread: !message.unread } : message,
),
);
return (
<div className="inbox">
<header>
<MotionHighlight
items={tabs}
value={filter}
onValueChange={setFilter}
transition={transition}
className="tabs"
itemClassName="tab"
highlightClassName="tab-on"
renderItem={(tab) => (
<>
{tab.label} <MotionNumber className="count" value={tab.count} />
</>
)}
/>
<button className="reset" onClick={() => setMail(start)}>
Reset
</button>
</header>
<MotionList
className="list"
items={visible}
effect={effect}
transition={transition}
layoutTransition={transition}
renderItem={(message) => (
<MotionSwipe
className="row"
contentClassName={message.unread ? 'content unread' : 'content'}
dismiss="end"
onDismiss={() => archive(message.id)}
endActions={
<button className="action" onClick={() => archive(message.id)}>
Archive
</button>
}
>
<button className="open" onClick={() => toggleRead(message.id)}>
<strong>{message.from}</strong>
<span>{message.subject}</span>
</button>
</MotionSwipe>
)}
/>
{visible.length === 0 && <p className="empty">Nothing here.</p>}
</div>
);
}
