chore: Refactor Accordion component to use state hook for panel activation

Author: Rekl0w

src/content/learn/sharing-state-between-components.md

@@ -133,27 +133,29 @@ In this example, it's the `Accordion` component. Since it's above both panels an
 import { useState } from 'react';
 
 export default function Accordion() {
+  const [isActive, setIsActive] = useState(false);
+
   return (
     <>
       <h2>Almaty, Kazakhstan</h2>
-      <Panel title="About" isActive={true}>
+      <Panel title="About" isActive={isActive} onShow={() => setIsActive(true)}>
         With a population of about 2 million, Almaty is Kazakhstan's largest city. From 1929 to 1997, it was its capital city.
       </Panel>
-      <Panel title="Etymology" isActive={true}>
+      <Panel title="Etymology" isActive={isActive} onShow={() => setIsActive(true)}>
         The name comes from <span lang="kk-KZ">алма</span>, the Kazakh word for "apple" and is often translated as "full of apples". In fact, the region surrounding Almaty is thought to be the ancestral home of the apple, and the wild <i lang="la">Malus sieversii</i> is considered a likely candidate for the ancestor of the modern domestic apple.
       </Panel>
     </>
   );
 }
 
-function Panel({ title, children, isActive }) {
+function Panel({ title, children, isActive, onShow }) {
   return (
     <section className="panel">
       <h3>{title}</h3>
       {isActive ? (
         <p>{children}</p>
       ) : (
-        <button onClick={() => setIsActive(true)}>
+        <button onClick={onShow}>
           Show
         </button>
       )}