65 lines
2.3 KiB
TypeScript
65 lines
2.3 KiB
TypeScript
|
"use client"
|
||
|
|
|
||
|
|
import { useState } from "react"
|
||
|
|
import { Button } from "@/components/ui/button"
|
||
|
|
import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
|
||
|
|
import { Play, Video } from "lucide-react"
|
||
|
|
import { usePathname } from "next/navigation"
|
||
|
|
import { getPageTutorials } from "@/lib/tutorials"
|
||
|
|
|
||
|
|
export function VideoTutorialButton() {
|
||
|
|
const [isOpen, setIsOpen] = useState(false)
|
||
|
|
const pathname = usePathname()
|
||
|
|
const tutorials = getPageTutorials(pathname)
|
||
|
|
|
||
|
|
const handleOpenDialog = () => {
|
||
|
|
setIsOpen(true)
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<Button
|
||
|
|
size="icon"
|
||
|
|
className="fixed bottom-20 right-4 h-12 w-12 rounded-full shadow-lg bg-white hover:bg-gray-50 border z-50"
|
||
|
|
onClick={handleOpenDialog}
|
||
|
|
>
|
||
|
|
<Video className="h-5 w-5 text-gray-600" />
|
||
|
|
</Button>
|
||
|
|
<Dialog open={isOpen} onOpenChange={setIsOpen}>
|
||
|
|
<DialogContent className="sm:max-w-[640px] p-0">
|
||
|
|
<DialogHeader>
|
||
|
|
<DialogTitle className="p-4 border-b">视频教程</DialogTitle>
|
||
|
|
</DialogHeader>
|
||
|
|
<div className="p-4">
|
||
|
|
{tutorials.length > 0 ? (
|
||
|
|
<div className="space-y-4">
|
||
|
|
{tutorials.map((tutorial) => (
|
||
|
|
<div key={tutorial.id} className="flex items-center space-x-4">
|
||
|
|
<div className="w-24 h-16 bg-gray-200 rounded-lg relative overflow-hidden">
|
||
|
|
<img
|
||
|
|
src={tutorial.thumbnailUrl || "/placeholder.svg"}
|
||
|
|
alt={tutorial.title}
|
||
|
|
className="absolute inset-0 w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 flex items-center justify-center">
|
||
|
|
<Play className="w-8 h-8 text-white" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div className="flex-1">
|
||
|
|
<h3 className="font-medium">{tutorial.title}</h3>
|
||
|
|
<p className="text-sm text-gray-500">{tutorial.description}</p>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="text-center py-8 text-gray-500">暂无该页面的教程视频</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</DialogContent>
|
||
|
|
</Dialog>
|
||
|
|
</>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|