web/parch-cast
9
0
Fork 0
Code Issues 6 Pull requests Projects Releases Packages Wiki Activity Actions

Refactor episode cards, footer, podcast hero, player, and subscribe section for improved responsiveness; adjust padding, text sizes, and layout classes

Browse source
This commit is contained in:
Mobin 2025-03-21 10:58:33 +03:30
parent ce5d2d29af
commit 16a13e1d47
5 changed files with 32 additions and 23 deletions
Download patch file Download diff file Expand all files Collapse all files

40
components/episode-cards.tsx
View file

@ -44,37 +44,37 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
return (
<section
className={`${section === "main" ? "py-12 md:py-16 lg:py-20" : ""}`}
className={`${section === "main" ? "py-8 md:py-16 lg:py-20" : ""}`}
>
<div className={`${section === "main" ? "container" : ""}`}>
<div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
<div className="flex items-start justify-between gap-4 flex-row md:items-center">
<div>
<h2
className={`${
section === "main"
? "text-4xl font-bold tracking-tight text-parch leading-normal"
? "lg:text-4xl md:text-3xl text-2xl font-bold tracking-tight text-parch leading-normal"
: "text-2xl font-bold"
}`}
>
آخرین قسمت ها
</h2>
<p className="text-muted-foreground">
<p className="text-muted-foreground text-sm md:text-base">
از جدیدترین مکالمات ما مطلع شوید
</p>
</div>
<Button variant="link" className="gap-1 pe-0">
<Button variant="link" className="gap-1 pe-0 text-xs md:text-sm">
مشاهده همه قسمت ها
</Button>
</div>
<div
className={`mt-8 grid md:gap-6 gap-4 grid-cols-2 ${
className={`mt-8 grid lg:gap-6 md:gap-4 gap-2 grid-cols-2 ${
section === "main" ? "lg:grid-cols-4" : "lg:grid-cols-3"
}`}
>
{episodes.map((episode) => (
<Card
key={episode.id}
className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer"
className="flex flex-col overflow-hidden pt-0 border-parch cursor-pointer md:pb-6 pb-3 md:gap-6 gap-3"
>
<div className="aspect-video w-full overflow-hidden">
<Image
@ -85,23 +85,31 @@ export function EpisodeCards({ section }: { section: "podcast" | "main" }) {
className="h-full w-full object-cover transition-all hover:scale-105"
/>
</div>
<CardHeader>
<CardTitle>{episode.title}</CardTitle>
<CardDescription>{episode.date}</CardDescription>
<CardHeader className="md:px-6 px-2">
<CardTitle className="text-sm md:text-base">
{episode.title}
</CardTitle>
<CardDescription className="text-xs md:text-sm">
{episode.date}
</CardDescription>
</CardHeader>
<CardContent>
<CardContent className="md:px-6 px-2 text-xs md:text-sm">
<p className="line-clamp-3 text-sm text-muted-foreground">
{episode.description}
</p>
</CardContent>
<CardFooter className="flex items-center justify-between">
<div className="flex items-center text-sm text-muted-foreground">
<Clock className="ml-1 h-4 w-4" />
<CardFooter className="flex items-center justify-between md:px-6 px-2">
<div className="flex items-center text-muted-foreground text-xs md:text-sm">
<Clock className="ml-1 md:h-4 md:w-4 h-3.5 w-3.5" />
{episode.duration}
</div>
<Button size="sm" variant="ghost" className="gap-1">
<Button
size="sm"
variant="ghost"
className="gap-1 text-xs md:text-sm"
>
پخش
<Play className="h-4 w-4" />
<Play className="md:h-4 md:w-4 h-3.5 w-3.5" />
</Button>
</CardFooter>
</Card>

2
components/footer-section.tsx
View file

@ -42,7 +42,7 @@ export default function FooterSection() {
پارچ گیمینگ
</a>
</FooterColumn>
<FooterColumn>
<FooterColumn className="col-span-2 sm:col-span-3 md:col-span-1">
<h3 className="text-md pt-1 font-semibold">ما را دنبال کنید</h3>
<span className="text-sm text-muted-foreground text-justify">
مطالب بیشتر و اطلاعات گوناگونی در شبکه‌های اجتماعی رخ منتشر

6
components/podcast-hero.tsx
View file

@ -4,17 +4,17 @@ import Image from "next/image";
export function PodcastHero() {
return (
<section className="relative pt-24 pb-16 lg:pt-36 md:pb-24">
<section className="relative pt-20 pb-4 md:pt-24 md:pb-16 lg:pt-36 lg::pb-24">
<div className="container">
<div className="grid gap-6 lg:grid-cols-[1fr_400px] lg:gap-12 xl:grid-cols-[1fr_450px]">
<div className="flex flex-col justify-center space-y-4">
<div className="space-y-2">
<div className="flex items-center -ms-2">
<div className="flex items-center lg:-ms-2 mb-3 -ms-1">
<Image
src={"/logo.png"}
width={55}
height={55}
className="mt-2"
className="md:w-auto md:h-auto w-9 h-9 lg:mt-2"
alt="logo"
/>
<h1 className="text-parch text-3xl font-bold tracking-tighter sm:text-4xl md:text-5xl lg:text-6xl leading-normal pe-2">

3
components/podcast-player.tsx
View file

@ -24,6 +24,7 @@ export function PodcastPlayer() {
useEffect(() => {
const audio = audioRef.current;
if (!audio) return;
audioRef.current?.load();
const updateTime = () => setCurrentTime(audio.currentTime);
const updateDuration = () => setDuration(audio.duration);
@ -114,7 +115,7 @@ export function PodcastPlayer() {
value={[currentTime]}
max={duration}
step={1}
className="w-full"
className="w-full mx-2"
onValueChange={(value) => {
if (audioRef.current) {
audioRef.current.currentTime = value[0];

4
components/subscribe-section.tsx
View file

@ -6,7 +6,7 @@ export function SubscribeSection() {
return (
<section className="py-12 md:py-16 lg:py-20 border-b">
<div className="container">
<div className="mx-auto text-center">
<div className="mx-auto max-w-2xl text-center">
<div className="flex justify-center">
<div className="rounded-full bg-primary/10 p-3">
<Headphones className="h-6 w-6 text-primary" />
@ -27,7 +27,7 @@ export function SubscribeSection() {
/>
<Button className="bg-parch">
مشترک شوید
<Mail className="mr-2 h-4 w-4" />
<Mail className="md:mr-2 h-4 w-4" />
</Button>
</div>
</div>