83 lines
2.7 KiB
TypeScript
83 lines
2.7 KiB
TypeScript
'use client';
|
|
|
|
import { useState } from 'react';
|
|
import { SocialShareButtons } from './SocialShareButtons';
|
|
import type { ShareType } from '@/types/api-types';
|
|
|
|
interface ShareModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
shareUrl: string;
|
|
title: string;
|
|
type: ShareType;
|
|
}
|
|
|
|
export function ShareModal({ isOpen, onClose, shareUrl, title, type }: ShareModalProps) {
|
|
const [copied, setCopied] = useState(false);
|
|
|
|
if (!isOpen) return null;
|
|
|
|
const handleCopyLink = async () => {
|
|
try {
|
|
await navigator.clipboard.writeText(shareUrl);
|
|
setCopied(true);
|
|
setTimeout(() => setCopied(false), 2000);
|
|
} catch (err) {
|
|
console.error('Failed to copy:', err);
|
|
}
|
|
};
|
|
|
|
const typeLabel = type === 'SONG' ? 'song' : type === 'PLAYLIST' ? 'playlist' : 'album';
|
|
|
|
return (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center">
|
|
{/* Backdrop */}
|
|
<div
|
|
className="absolute inset-0 bg-black/60 backdrop-blur-sm"
|
|
onClick={onClose}
|
|
/>
|
|
|
|
{/* Modal */}
|
|
<div className="relative bg-zinc-900 rounded-xl p-6 w-full max-w-md mx-4 shadow-2xl">
|
|
<button
|
|
onClick={onClose}
|
|
className="absolute top-4 right-4 text-zinc-400 hover:text-white transition-colors"
|
|
aria-label="Close"
|
|
>
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|
</svg>
|
|
</button>
|
|
|
|
<h2 className="text-xl font-semibold text-white mb-2">Share {typeLabel}</h2>
|
|
<p className="text-zinc-400 text-sm mb-6 truncate">{title}</p>
|
|
|
|
{/* Copy Link */}
|
|
<div className="mb-6">
|
|
<label className="text-sm text-zinc-400 mb-2 block">Share link</label>
|
|
<div className="flex gap-2">
|
|
<input
|
|
type="text"
|
|
readOnly
|
|
value={shareUrl}
|
|
className="flex-1 bg-zinc-800 text-zinc-300 px-3 py-2 rounded-lg text-sm truncate border border-zinc-700 focus:outline-none focus:border-purple-500"
|
|
/>
|
|
<button
|
|
onClick={handleCopyLink}
|
|
className="px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg text-sm font-medium transition-colors whitespace-nowrap"
|
|
>
|
|
{copied ? 'Copied!' : 'Copy'}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Social Share */}
|
|
<div>
|
|
<label className="text-sm text-zinc-400 mb-3 block">Share on social media</label>
|
|
<SocialShareButtons url={shareUrl} title={title} />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|