ershisan99/podcaster
1
0
Fork 0
mirror of https://github.com/ershisan99/podcaster.git synced 2025-12-18 05:09:30 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat: add home page styles

Browse Source
This commit is contained in:
andres
2024-04-21 00:10:33 +02:00
parent 55b0ac8794
commit 9218e20427
3 changed files with 42 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@@ -1,5 +1,5 @@
<!doctype html> <!doctype html>
<html lang="en"> <html lang="en" class="bg-slate-50">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

24
src/components/podcast-preview-card.tsx
View File

@@ -14,10 +14,26 @@ export function PodcastPreviewCard({
detailUrl, detailUrl,
}: Props) { }: Props) {
return ( return (
<Link to={detailUrl}> <Link to={detailUrl} className={"w-full"}>
<img src={imageUrl} alt={title} /> <div className={"relative mt-12 p-3 pt-12 shadow-md"}>
<h3>{title}</h3> <img
<h4>{author}</h4> src={imageUrl}
alt={title}
className={
"absolute -top-12 left-2/4 h-24 w-24 -translate-x-1/2 rounded-full object-cover"
}
/>
<h3
className={
"text-md mt-2 text-center font-semibold uppercase tracking-tight"
}
>
{title}
</h3>
<h4 className={"mt-2 text-center text-sm text-slate-500"}>
Author: {author}
</h4>
</div>
</Link> </Link>
); );
} }

31
src/pages/home.tsx
View File

@@ -1,5 +1,6 @@
import { PodcastPreviewCard } from "../components/podcast-preview-card";
import { useState } from "react"; import { useState } from "react";
import { PodcastPreviewCard } from "../components/podcast-preview-card";
import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks"; import { useTopPodcastsQuery } from "../services/podcasts/podcast.hooks";
export function Home() { export function Home() {
@@ -18,14 +19,24 @@ export function Home() {
} }
return ( return (
<main> <div>
<input <div className={"mb-6 flex items-center justify-end gap-3"}>
type="text" <span
value={search} className={
onChange={(e) => setSearch(e.target.value)} "flex items-center rounded-xl bg-sky-800 px-2 py-1.5 font-bold leading-none text-white"
placeholder="Search..." }
/> >
<div className={"grid grid-cols-4"}> {filteredData?.length}
</span>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Filter podcasts..."
className={"w-1/3 rounded-md border border-gray-300 p-2"}
/>
</div>
<div className={"grid grid-cols-4 gap-x-6 gap-y-14"}>
{filteredData?.map((podcast) => ( {filteredData?.map((podcast) => (
<PodcastPreviewCard <PodcastPreviewCard
detailUrl={`/podcast/${podcast.id}`} detailUrl={`/podcast/${podcast.id}`}
@@ -36,6 +47,6 @@ export function Home() {
/> />
))} ))}
</div> </div>
</main> </div>
); );
} }