From 9218e20427757f87051aa2b0542bb6e824d07f51 Mon Sep 17 00:00:00 2001 From: andres Date: Sun, 21 Apr 2024 00:10:33 +0200 Subject: [PATCH] feat: add home page styles --- index.html | 2 +- src/components/podcast-preview-card.tsx | 24 +++++++++++++++---- src/pages/home.tsx | 31 +++++++++++++++++-------- 3 files changed, 42 insertions(+), 15 deletions(-) diff --git a/index.html b/index.html index b7ab814..4928ccd 100644 --- a/index.html +++ b/index.html @@ -1,5 +1,5 @@ - + diff --git a/src/components/podcast-preview-card.tsx b/src/components/podcast-preview-card.tsx index 9b69dbc..1e2929a 100644 --- a/src/components/podcast-preview-card.tsx +++ b/src/components/podcast-preview-card.tsx @@ -14,10 +14,26 @@ export function PodcastPreviewCard({ detailUrl, }: Props) { return ( - - {title} -

{title}

-

{author}

+ +
+ {title} +

+ {title} +

+

+ Author: {author} +

+
); } diff --git a/src/pages/home.tsx b/src/pages/home.tsx index c63f307..2a0e923 100644 --- a/src/pages/home.tsx +++ b/src/pages/home.tsx @@ -1,5 +1,6 @@ -import { PodcastPreviewCard } from "../components/podcast-preview-card"; import { useState } from "react"; + +import { PodcastPreviewCard } from "../components/podcast-preview-card"; import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks"; export function Home() { @@ -18,14 +19,24 @@ export function Home() { } return ( -
- setSearch(e.target.value)} - placeholder="Search..." - /> -
+
+
+ + {filteredData?.length} + + setSearch(e.target.value)} + placeholder="Filter podcasts..." + className={"w-1/3 rounded-md border border-gray-300 p-2"} + /> +
+
{filteredData?.map((podcast) => ( ))}
-
+ ); }