feat: add search for podcasts list

This commit is contained in:
2024-04-18 21:35:39 +02:00
parent 8ac7bf2bbf
commit a381913434
2 changed files with 18 additions and 3 deletions

View File

@@ -1,14 +1,29 @@
import { PodcastPreviewCard } from "../components/podcast-preview-card";
import { podcastsService } from "../services/podcasts/podcasts.service";
import { useQuery } from "../hooks/useQuery";
import { useState } from "react";
export function Home() {
const { data } = useQuery(() => podcastsService.getTopPodcasts());
const [search, setSearch] = useState("");
const filteredData = data?.filter((podcast) => {
return (
podcast.title.toLowerCase().includes(search.toLowerCase()) ||
podcast.author.toLowerCase().includes(search.toLowerCase())
);
});
return (
<main>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search..."
/>
<div className={"grid grid-cols-4"}>
{data?.map((podcast) => (
{filteredData?.map((podcast) => (
<PodcastPreviewCard
detailUrl={`/podcast/${podcast.id}`}
key={podcast.id}