## 題目
請複製 （右下角 fork）這個[範例](https://codepen.io/yen-kg/pen/JjgeKjV?editors=1010)，將重複的部分（`.col-lg-6`）拆分為元件，並使用 props 讓呈現結果相同。

## 回報流程
將答案寫在 CodePen 並複製 CodePen 連結貼至底下回報就算完成了喔!
解答位置請參考下圖（需打開程式碼的部分觀看）

<!-- 解答：

function PostCard({post}) {
  return (<div className="col-lg-6">
        <article className="card mb-3">
  <div className="row g-0">
    <div className="col-4">
      <img  src={post.img_url} alt={post.title} className="img-fluid rounded-start h-100" />
    </div>
    <div className="col-8">
      <div className="card-body">
        <h5 className="card-title">{post.title}</h5>
        <p className="card-text">{post.description}</p>
        <time className="card-text"><small className="text-body-secondary">{post.created_at}</small></time>
      </div>
    </div>
  </div>
</article>
      </div>)
}

function App() {
  const postData = [...]
  return (
    <div className="container">
      <div className="row">
      {postData.map(post => <PostCard key={post.id} post={post}/>)}
        </div>
    </div>
  );
}
      
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<App />);

-->

回報區
---
| # | Discord | CodePen / 答案 |
|:---:|:-------------- |:----------------------------------------------------------------------------- |
| 1 | MY | [Codepen](https://codepen.io/ahmomoz/pen/bNboezd) |
| 2 | Sonia | [Codepen](https://codepen.io/YUJOU/pen/ByBOdpp?editors=1011) |
| 3 | LinaChen | [Codepen](https://codepen.io/LinaChen/pen/QwLVqjZ) |
| 4 | 毛巾 | [Codepen](https://codepen.io/bqdcjboa-the-solid/pen/RNbYLQx) |
| 5 | Nocab | [Codepen](https://codepen.io/PeihanWang/pen/zxOJEEv?editors=1011) |
| 6 | 泊岸 | [Codepen](https://codepen.io/qoq77416416/pen/mybGBGL?editors=0010) |
| 7 | Toung | [Codepen](https://codepen.io/Toung/pen/GgKXMLX) |
|8|Hailey|[CodePen](https://codepen.io/sxbokfja-the-flexboxer/pen/mybGBZG?editors=1010)|
| 9 | 4chan | [Codepen](https://codepen.io/ijuolaqc-the-looper/pen/EaYewMZ) |
| 10 | Aaron 謝宗佑 | [Codepen](https://codepen.io/aaron-hsieh/pen/PwYdJMX) |
| 11 | tim | [Codepen](https://codepen.io/jskrtivy-the-animator/pen/PwYdOwV?editors=1010) |
| 12 | Satar | [Codepen](https://codepen.io/SatarKuo/pen/ByBOmKe?editors=0010) |
| 13 | han |[Codepen](https://codepen.io/iamHanCheng/pen/KwPxyKw?editors=1010)|
| 14 | 邵 |[Codepen](https://codepen.io/ukscrlno-the-typescripter/pen/xbKaPea?editors=1011)|
| 15 | ya_meow | [Codepen](https://codepen.io/gkfxzvcb-the-bashful/pen/PwYdOgq?editors=0010)|
| 16 | 嚼勁先生 | [Codepen](https://codepen.io/James520284/pen/raBZpBd)|
| 17 | Jasmine | [Codepen](https://codepen.io/Jasmine-Lin-the-vuer/pen/LEPJeop) |
| 18 | mercury2508. | [Codepen](https://codepen.io/Mercury2508/pen/ZYzMrRY) |
| 19 | Noy(Toad) | [Codepen](https://codepen.io/MochiCodingPen/pen/LEPJVQL) |
| 20 | Clove | [Codepen](https://codesandbox.io/p/sandbox/2xk32q) |
| 21 | Amanda | [Codepen](https://codepen.io/cym199922/pen/RNbYBwB) |
| 22 | Kaya | [Codepen](https://codepen.io/kayaribi/pen/bNbxjgb) |
| 23 | Rochel | [Codepen](https://codepen.io/rochelwang1205/pen/azoRGwR?editors=1010)|
| 24 | Johnson | [Codepen](https://codepen.io/crpbugqy-the-typescripter/pen/GgKPKON)|
| 25 | 蘑菇星星 | [Codepen](https://codepen.io/brrrieon-the-vuer/pen/JoPQPvO?editors=1010) |
| 26 | Ariel | [Codepen](https://codepen.io/ariel0510/pen/YPzKByq?editors=0010) |
| 27 | yaoling.liang | [Codepen](https://codepen.io/Yao-Ling-L-/pen/VYwaJWO?editors=1010) |
| 28 | 郭芙蘭 | [Codepen](https://codepen.io/flora_Kuo/pen/ZYEpZNw?editors=1010) |
| 29 | Joannehu | [Codepen](https://codepen.io/nelbabkv-the-flexboxer/pen/jEOmGNV?editors=1010) |
| 30 | KOMATSU PEI | [Codepen](https://codepen.io/Komatsu2021/pen/RNwjGdL?editors=0111) |
| 31 | 姜承 | [Codepen](https://codepen.io/Troy0718/pen/mydGWNQ?editors=1010) |
| 32 | jinliu214 | [Codepen](https://codepen.io/jinliu214/pen/qEEQmbJ?editors=0010) |
| 33 | chris | [Codepen](https://codepen.io/chris-chen-the-selector/pen/wBaORqZ?editors=1011) |
| 34 | shin_kai | [Codepen](https://codepen.io/KAI-SHIN-the-animator/pen/pvgEzLp) |

---

- 快速複製格式：

| 0 | user | [Codepen]() |