85 lines
2.9 KiB
TypeScript
85 lines
2.9 KiB
TypeScript
"use client";
|
||
|
||
import { Button } from "@/components/ui/button";
|
||
import { Slider } from "@/components/ui/slider";
|
||
import {
|
||
FastForward,
|
||
Pause,
|
||
Play,
|
||
Rewind,
|
||
SkipBack,
|
||
SkipForward,
|
||
Volume2,
|
||
} from "lucide-react";
|
||
import Image from "next/image";
|
||
import { useState } from "react";
|
||
|
||
export function PodcastPlayer() {
|
||
const [isPlaying, setIsPlaying] = useState(false);
|
||
|
||
return (
|
||
<div className="fixed bottom-0 left-0 right-0 border-t bg-background p-4">
|
||
<div className="mx-auto flex max-w-7xl items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<Image
|
||
src="https://picsum.photos/48"
|
||
alt="Episode Cover"
|
||
width={48}
|
||
height={48}
|
||
className="rounded-md"
|
||
/>
|
||
<div>
|
||
<h4 className="text-sm font-medium">قسمت اول: داستان پارچ</h4>
|
||
<p className="text-xs text-muted-foreground">Efoux</p>
|
||
</div>
|
||
</div>
|
||
<div className="flex flex-col items-center gap-1 md:w-1/2">
|
||
<div className="flex items-center gap-2">
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<SkipBack className="h-4 w-4" />
|
||
<span className="sr-only">Previous</span>
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<Rewind className="h-4 w-4" />
|
||
<span className="sr-only">Rewind</span>
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
size="icon"
|
||
className="h-10 w-10 rounded-full"
|
||
onClick={() => setIsPlaying(!isPlaying)}
|
||
>
|
||
{isPlaying ? (
|
||
<Pause className="h-5 w-5" />
|
||
) : (
|
||
<Play className="h-5 w-5" />
|
||
)}
|
||
<span className="sr-only">{isPlaying ? "Pause" : "Play"}</span>
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<FastForward className="h-4 w-4" />
|
||
<span className="sr-only">Fast Forward</span>
|
||
</Button>
|
||
<Button variant="ghost" size="icon" className="h-8 w-8">
|
||
<SkipForward className="h-4 w-4" />
|
||
<span className="sr-only">Next</span>
|
||
</Button>
|
||
</div>
|
||
<div className="flex w-full items-center gap-2">
|
||
<div className="text-xs tabular-nums text-muted-foreground">
|
||
62:00
|
||
</div>
|
||
<Slider defaultValue={[33]} max={100} step={1} className="w-full" />
|
||
<div className="text-xs tabular-nums text-muted-foreground">
|
||
12:34
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div className="hidden items-center gap-2 md:flex">
|
||
<Volume2 className="h-4 w-4 text-muted-foreground" />
|
||
<Slider defaultValue={[70]} max={100} step={1} className="w-20" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
}
|