change using app router

app/caramel/[id]/_components/Card.tsx

@@ -0,0 +1,35 @@
+import React from 'react'
+
+export type CardProps = {
+  by: string
+  descendants: number
+  id: number
+  score: number
+  time: number
+  title: string
+  type: 'job' | 'story' | 'comment' | 'poll'
+  url: string
+}
+
+const Card: React.FC<CardProps> = ({ by, descendants, id, score, time, title, type, url }) => {
+  return (
+    <div className='bg-white rounded-lg shadow-lg p-6'>
+      <h2 className='text-2xl font-bold mb-2'>
+        {id}: {title}
+      </h2>
+      <p className='text-gray-600 mb-2'>By: {by}</p>
+      <p className='text-gray-600 mb-2'>Score: {score}</p>
+      <p className='text-gray-600 mb-2'>Type: {type}</p>
+      <p className='text-gray-600 mb-2'>Time: {new Date(time * 1000).toLocaleString()}</p>
+      <p className='text-gray-600 mb-2'>
+        URL:{' '}
+        <a href={url} className='text-blue-500 hover:underline'>
+          {url}
+        </a>
+      </p>
+      <p className='text-gray-600'>Got {descendants} comments</p>
+    </div>
+  )
+}
+
+export default Card

app/caramel/[id]/page.tsx

@@ -0,0 +1,17 @@
+import Link from 'next/link'
+import Card from './_components/Card'
+// before routing: import Card, { CardProps } from '@/components/Card'
+
+export default async function Article({ params }: { params: { id: string } }) {
+  const res = await fetch(`https://hacker-news.firebaseio.com/v0/item/${params.id}.json`)
+  const article = await res.json()
+
+  return (
+    <div className='bg-[#bc611e] p-8'>
+      {article ? <Card {...article} /> : <div />}
+      <Link href='/caramel' className='btn btn-primary'>
+        Back
+      </Link>
+    </div>
+  )
+}