FreeNotice Read-More Toggle

Complete the read-more toggle on a notice list page with the Next.js app router. Each notice has a 'Read more' button; pressing it expands the body and pressing again collapses it. The notice data is a static array (lib/notices), and the toggle logic lives in the toggle component file under components.

The Next.js app router has a distinction about where a component runs. The part that only renders a screen and the part that responds to a user's clicks by changing the screen run in different places. This problem is about building a small widget with interactive behavior — pressing a button opens and closes a body. The habit that matters is confirming the screen actually changes each time you press.

How do you build an interactive widget in the Next.js app router?

The part with interactive behavior, like a button click, is carved out as its own small component rather than turning the whole page into one. The toggle component in this problem is that piece.

How do I verify the toggle behavior?

Run npm test with @testing-library/react, then use npm run dev and on /notices press 'Read more' to confirm the body expands and collapses again when pressed once more.

Where does the notice data come from?

From the static array (3 items) in lib/notices.ts. That data is complete and needs no changes; server persistence and global state are out of scope.