ershisan99/podcaster
1
0
Fork 0
mirror of https://github.com/ershisan99/podcaster.git synced 2025-12-16 20:59:26 +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>
<html lang="en">
<html lang="en" class="bg-slate-50">
<head>
<meta charset="UTF-8" />
<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,
}: Props) {
return (
<Link to={detailUrl}>
<img src={imageUrl} alt={title} />
<h3>{title}</h3>
<h4>{author}</h4>
<Link to={detailUrl} className={"w-full"}>
<div className={"relative mt-12 p-3 pt-12 shadow-md"}>
<img
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>
);
}

31
src/pages/home.tsx
View File

@@ -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 (
<main>
<input
type="text"
value={search}
onChange={(e) => setSearch(e.target.value)}
placeholder="Search..."
/>
<div className={"grid grid-cols-4"}>
<div>
<div className={"mb-6 flex items-center justify-end gap-3"}>
<span
className={
"flex items-center rounded-xl bg-sky-800 px-2 py-1.5 font-bold leading-none text-white"
}
>
{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) => (
<PodcastPreviewCard
detailUrl={`/podcast/${podcast.id}`}
@@ -36,6 +47,6 @@ export function Home() {
/>
))}
</div>
</main>
</div>
);
}