complete share section and content of podcast
This commit is contained in:
parent
5d603dce90
commit
8eeb6d73d8
12 changed files with 253 additions and 14 deletions
|
|
@ -2,9 +2,9 @@ import Image from "next/image";
|
|||
|
||||
export function AboutPodcast() {
|
||||
return (
|
||||
<section className="bg-muted/50 py-12 md:py-16 lg:py-20">
|
||||
<section className="container bg-muted/50 py-12 md:py-16 lg:py-20">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="grid gap-6 lg:grid-cols-2 lg:gap-12">
|
||||
<div className="grid gap-6 lg:grid-cols-[400px_1fr] lg:gap-12 xl:grid-cols-[450px_1fr]">
|
||||
<div className="space-y-4 ml-auto">
|
||||
<Image
|
||||
src="https://picsum.photos/450/450"
|
||||
|
|
|
|||
|
|
@ -52,7 +52,7 @@ export function EpisodeCards() {
|
|||
];
|
||||
|
||||
return (
|
||||
<section className="py-12 md:py-16 lg:py-20">
|
||||
<section className="container py-12 md:py-16 lg:py-20">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="flex flex-col items-start justify-between gap-4 md:flex-row md:items-center">
|
||||
<div>
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ import Image from "next/image";
|
|||
|
||||
export default function Header() {
|
||||
return (
|
||||
<div className="mx-auto px-4 md:px-6 lg:px-8 fixed w-full z-10">
|
||||
<header className="container flex h-20 w-full shrink-0 items-center justify-between">
|
||||
<div className="container mx-auto left-1/2 -translate-x-1/2 fixed w-full z-10">
|
||||
<header className="px-4 md:px-6 flex h-20 w-full shrink-0 items-center justify-between">
|
||||
<div className="flex gap-2">
|
||||
<Button variant="ghost" className="px-2 py-1">
|
||||
<Menu />
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import Image from "next/image";
|
|||
|
||||
export function PodcastHero() {
|
||||
return (
|
||||
<section className="relative pt-20 pb-16 md:pt-36 md:pb-24">
|
||||
<section className="container relative pt-20 pb-16 md:pt-36 md:pb-24">
|
||||
<div className="container px-4 md:px-6">
|
||||
<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">
|
||||
|
|
@ -42,7 +42,7 @@ export function PodcastHero() {
|
|||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="mx-auto aspect-square overflow-hidden rounded-xl bg-muted lg:order-last">
|
||||
<div className="aspect-square overflow-hidden rounded-xl bg-muted lg:order-last">
|
||||
<Image
|
||||
src="https://picsum.photos/450/450"
|
||||
alt="Podcast Cover Art"
|
||||
|
|
|
|||
85
components/podcast-player.tsx
Normal file
85
components/podcast-player.tsx
Normal file
|
|
@ -0,0 +1,85 @@
|
|||
"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>
|
||||
);
|
||||
}
|
||||
|
|
@ -4,7 +4,7 @@ import { Headphones, Mail } from "lucide-react";
|
|||
|
||||
export function SubscribeSection() {
|
||||
return (
|
||||
<section className="py-12 md:py-16 lg:py-20 border-b">
|
||||
<section className="container py-12 md:py-16 lg:py-20 border-b">
|
||||
<div className="container px-4 md:px-6">
|
||||
<div className="mx-auto max-w-2xl text-center">
|
||||
<div className="flex justify-center">
|
||||
|
|
|
|||
28
components/ui/separator.tsx
Normal file
28
components/ui/separator.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SeparatorPrimitive from "@radix-ui/react-separator"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Separator({
|
||||
className,
|
||||
orientation = "horizontal",
|
||||
decorative = true,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
|
||||
return (
|
||||
<SeparatorPrimitive.Root
|
||||
data-slot="separator-root"
|
||||
decorative={decorative}
|
||||
orientation={orientation}
|
||||
className={cn(
|
||||
"bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
export { Separator }
|
||||
63
components/ui/slider.tsx
Normal file
63
components/ui/slider.tsx
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
"use client"
|
||||
|
||||
import * as React from "react"
|
||||
import * as SliderPrimitive from "@radix-ui/react-slider"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
|
||||
function Slider({
|
||||
className,
|
||||
defaultValue,
|
||||
value,
|
||||
min = 0,
|
||||
max = 100,
|
||||
...props
|
||||
}: React.ComponentProps<typeof SliderPrimitive.Root>) {
|
||||
const _values = React.useMemo(
|
||||
() =>
|
||||
Array.isArray(value)
|
||||
? value
|
||||
: Array.isArray(defaultValue)
|
||||
? defaultValue
|
||||
: [min, max],
|
||||
[value, defaultValue, min, max]
|
||||
)
|
||||
|
||||
return (
|
||||
<SliderPrimitive.Root
|
||||
data-slot="slider"
|
||||
defaultValue={defaultValue}
|
||||
value={value}
|
||||
min={min}
|
||||
max={max}
|
||||
className={cn(
|
||||
"relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
<SliderPrimitive.Track
|
||||
data-slot="slider-track"
|
||||
className={cn(
|
||||
"bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
|
||||
)}
|
||||
>
|
||||
<SliderPrimitive.Range
|
||||
data-slot="slider-range"
|
||||
className={cn(
|
||||
"bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
|
||||
)}
|
||||
/>
|
||||
</SliderPrimitive.Track>
|
||||
{Array.from({ length: _values.length }, (_, index) => (
|
||||
<SliderPrimitive.Thumb
|
||||
data-slot="slider-thumb"
|
||||
key={index}
|
||||
className="border-primary bg-background ring-ring/50 block size-4 shrink-0 rounded-full border shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
|
||||
/>
|
||||
))}
|
||||
</SliderPrimitive.Root>
|
||||
)
|
||||
}
|
||||
|
||||
export { Slider }
|
||||
Loading…
Add table
Add a link
Reference in a new issue