components/card.client.tsx
'use client';
import { CardType } from 'types/types';

export default function Card({ title, description, date }: CardType) {
  const handleOnClick = () => {};
  return (
    <div>
      <h2> {title}</h2>
      <p>{description}</p>
      <time dateTime={date}>{date}</time>
      <div>
        <button onClick={handleOnClick}>Go</button>
      </div>
    </div>
  );
}
types/types.ts
export type CardType = {
  title: string;
  description: string;
  date: string;
};
AK
Image of Ankita Kulkarni
Ankita Kulkarni
@kulkarniankita9

Card Component

this directive makes it a client component

Suffix it with .client.tsx since it's a Client component

Types of Card component

you can't have onClick events inside

server components