News Search

Cards 11

About

Here is News Search component

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds News Search to your project and fits it to your theme.

Code

How News Search is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client"

import * as React from "react"
import NewsList, { type NewsSearchResult } from "@/components/ui/news-search"

export default function Demo() {
  // Мок-данные, чтобы избежать "data is undefined"
  const mock: NewsSearchResult = {
    topic: "JavaScript",
    items: [
      {
        id: "1",
        title: "TC39 proposes new stage-3 feature",
        url: "https://example.com/tc39-stage-3",
        publishedAt: new Date().toISOString(),
      },
      {
        id: "2",
        title: "Vite 6 released with faster HMR",
        url: "https://example.com/vite-6",
        publishedAt: new Date(Date.now() - 3600_000).toISOString(),
      },
      {
        id: "3",
        title: "Understanding React Server Components",
        url: "https://example.com/rsc-guide",
        publishedAt: new Date(Date.now() - 2 * 3600_000).toISOString(),
      },
    ],
  }

  return <NewsList data={mock} />
}