在线

https://chat.xutongbao.top/nextjs/light/nano

'use client' import Header from '@/components/header' import { ArrowLeft, Send, RefreshCw, Sparkles, Upload, X, Download, Copy, Check, ImagePlus, Maximize2, } from 'lucide-react' import { useRouter } from 'next/navigation' import { useState, useEffect, useRef } from 'react' import Image from 'next/image' import Api from '@/api/h5Api' interface MessageItem { uid: string createTime: number info: { message?: string originalMessage?: string aiMessage?: string imgUrlCdn?: string | string[] visionImgList?: Array<{ url: string }> } } interface ApiResponse<T = any> { code: number message?: string data: T } export default function Page() { const router = useRouter() const [dataSource, setDataSource] = useState<MessageItem[]>([]) const [isLoading, setIsLoading] = useState(false) const [isDrawing, setIsDrawing] = useState(false) const [inputMessage, setInputMessage] = useState('') const [current, setCurrent] = useState(1) const [isHasMore, setIsHasMore] = useState(true) const [copiedText, setCopiedText] = useState<string | null>(null) const [uploadedImages, setUploadedImages] = useState<string[]>([]) const [previewImage, setPreviewImage] = useState<string | null>(null) const [qiniuToken, setQiniuToken] = useState<string>('') const [isMobileDevice, setIsMobileDevice] = useState(false) const messagesEndRef = useRef<HTMLDivElement>(null) const scrollContainerRef = useRef<HTMLDivElement>(null) const fileInputRef = useRef<HTMLInputElement>(null) // 检测是否是移动设备/触摸设备 useEffect(() => { const checkMobileDevice = () => { // 检测是否支持触摸事件 const isTouchDevice = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || (navigator as any).msMaxTouchPoints > 0 // 检测 UserAgent const userAgent = navigator.userAgent.toLowerCase() const isMobileUA = /android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test( userAgent ) setIsMobileDevice(isTouchDevice || isMobileUA) } checkMobileDevice() }, []) // 获取七牛云上传 token useEffect(() => { const getUploadToken = async () => { try { const res = (await Api.uploadGetTokenForH5( {} )) as unknown as ApiResponse if (res.code === 200 && res.data?.token) { setQiniuToken(res.data.token) } } catch (error) { console.error('获取上传token失败:', error) } } getUploadToken() }, []) // 获取提示词 const getPrompt = (item: MessageItem) => { if (item.info?.originalMessage) { return item.info.originalMessage } else if (item.info?.message) { return item.info.message } return '' } // 加载数据 const handleSearch = async ({ page = 1, isRefresh = false } = {}) => { if (isRefresh) { setDataSource([]) setIsLoading(true) } try { const res = (await Api.mjAppSearch({ pageNum: page, pageSize: 10, })) as unknown as ApiResponse if (res.code === 200) { const { pageNum, pageSize, total } = res.data let list = res.data.list if (isRefresh) { setDataSource([...list]) } else { setDataSource((prev) => [...prev, ...list]) } const currentTemp = pageNum + 1 setCurrent(currentTemp) setIsHasMore(pageNum < Math.ceil(total / pageSize)) setIsLoading(false) } } catch (error) { console.error('加载失败:', error) setIsLoading(false) } } // 将图片转换为 PNG 格式 const convertImageToPng = (file: File): Promise<File> => { return new Promise((resolve, reject) => { const reader = new FileReader() reader.onload = (e) => { const img = new window.Image() img.onload = () => { // 创建 canvas const canvas = document.createElement('canvas') canvas.width = img.width canvas.height = img.height // 绘制图片到 canvas const ctx = canvas.getContext('2d') if (!ctx) { reject(new Error('无法获取 canvas context')) return } ctx.drawImage(img, 0, 0) // 转换为 PNG blob canvas.toBlob( (blob) => { if (!blob) { reject(new Error('图片转换失败')) return } // 创建新的 File 对象 const pngFile = new File( [blob], file.name.replace(/\.[^.]+$/, '.png'), { type: 'image/png', } ) resolve(pngFile) }, 'image/png', 1.0 ) } img.onerror = () => reject(new Error('图片加载失败')) img.src = e.target?.result as string } reader.onerror = () => reject(new Error('文件读取失败')) reader.readAsDataURL(file) }) } // 上传图片到七牛云 const handleImageUpload = async (e: React.ChangeEvent<HTMLInputElement>) => { const files = e.target.files if (!files || files.length === 0 || !qiniuToken) return const file = files[0] try { // 将图片转换为 PNG 格式 const pngFile = await convertImageToPng(file) const formData = new FormData() const key = `ai/mjBaseImg/${Date.now()}_${pngFile.name}` formData.append('file', pngFile) formData.append('token', qiniuToken) formData.append('key', key) const response = await fetch('https://upload-z1.qiniup.com', { method: 'POST', body: formData, }) const result = await response.json() if (result.code === 200) { const imageUrl = `https://static.xutongbao.top/${result.data.key}` setUploadedImages((prev) => [...prev, imageUrl]) } } catch (error) { console.error('上传失败:', error) } // 清空 input,允许重复选择同一文件 e.target.value = '' } // 移除上传的图片 const handleRemoveImage = (index: number) => { setUploadedImages((prev) => prev.filter((_, i) => i !== index)) } // 发送消息 const handleSendMessage = async () => { if (!inputMessage.trim() || isDrawing) return setIsDrawing(true) try { let message = inputMessage const res = (await Api.mjAdd({ info: { message, drawType: 'grid', type: 'imagine', uploadedImages }, })) as unknown as ApiResponse if (res.code === 200) { setInputMessage('') setUploadedImages([]) await handleSearch({ page: 1, isRefresh: true }) // 滚动到顶部 setTimeout(() => { if (scrollContainerRef.current) { scrollContainerRef.current.scrollTop = 0 } }, 100) } } catch (error) { console.error('发送失败:', error) } finally { setIsDrawing(false) } } // 复制文本 const handleCopy = async (text: string) => { try { await navigator.clipboard.writeText(text) setCopiedText(text) setTimeout(() => setCopiedText(null), 2000) } catch (error) { console.error('复制失败:', error) } } // 下载图片 const handleDownload = async (url: string, filename?: string) => { try { const response = await fetch(url) const blob = await response.blob() const link = document.createElement('a') link.href = URL.createObjectURL(blob) link.download = filename || `image_${Date.now()}.png` document.body.appendChild(link) link.click() document.body.removeChild(link) URL.revokeObjectURL(link.href) } catch (error) { console.error('下载失败:', error) } } // 加载更多 const handleLoadMore = () => { if (!isLoading && isHasMore) { handleSearch({ page: current }) } } // 初始化加载 useEffect(() => { handleSearch({ page: 1, isRefresh: true }) }, []) return ( <> <Header /> <main className='min-h-screen bg-linear-to-br from-primary/5 via-background to-secondary/5 relative overflow-hidden'> {/* 背景装饰 */} <div className='absolute inset-0 overflow-hidden pointer-events-none'> <div className='absolute top-20 left-1/4 w-96 h-96 bg-primary/5 rounded-full blur-3xl animate-pulse-slow' /> <div className='absolute bottom-20 right-1/4 w-96 h-96 bg-secondary/5 rounded-full blur-3xl animate-pulse-slow' style={{ animationDelay: '2s' }} /> <div className='absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-96 h-96 bg-accent/5 rounded-full blur-3xl animate-pulse-slow' style={{ animationDelay: '4s' }} /> </div> {/* 内容区域 */} <div className='relative max-w-6xl mx-auto px-3 sm:px-4 py-3 sm:py-6 h-screen flex flex-col gap-3 sm:gap-4'> {/* 头部：返回按钮和刷新按钮 */} <div className='flex items-center justify-between animate-fade-in'> <button onClick={() => router.push('/light')} className='group flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg sm:rounded-xl bg-card/60 backdrop-blur-xl border border-border/50 hover:border-primary/50 shadow-sm hover:shadow-md transition-all duration-300' > <ArrowLeft className='w-4 h-4 text-muted-foreground group-hover:text-primary transition-colors duration-300 group-hover:-translate-x-0.5' /> <span className='text-xs sm:text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors duration-300'> 返回 </span> </button> <button onClick={() => handleSearch({ page: 1, isRefresh: true })} disabled={isLoading} className='group flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg sm:rounded-xl bg-card/60 backdrop-blur-xl border border-border/50 hover:border-primary/50 shadow-sm hover:shadow-md transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed' > <RefreshCw className={`w-4 h-4 text-muted-foreground group-hover:text-primary transition-all duration-300 ${ isLoading ? 'animate-spin' : 'group-hover:rotate-180' }`} /> <span className='text-xs sm:text-sm font-medium text-muted-foreground group-hover:text-foreground transition-colors duration-300'> 刷新 </span> </button> </div> {/* 创作输入区域 - 放在顶部，突出显示 */} <div className='bg-card/90 backdrop-blur-2xl rounded-2xl sm:rounded-3xl border-2 border-primary/20 shadow-2xl shadow-primary/10 p-3 sm:p-6 animate-fade-in-up relative overflow-hidden' style={{ animationDelay: '0.1s' }} > {/* 装饰性背景 */} <div className='absolute top-0 right-0 w-64 h-64 bg-linear-to-br from-primary/10 to-transparent rounded-full blur-3xl pointer-events-none' /> <div className='absolute bottom-0 left-0 w-64 h-64 bg-linear-to-tr from-secondary/10 to-transparent rounded-full blur-3xl pointer-events-none' /> <div className='relative space-y-3 sm:space-y-4'> {/* 标题 */} <div className='flex items-center gap-2 sm:gap-3 mb-1 sm:mb-2'> <div className='flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-xl sm:rounded-2xl bg-linear-to-br from-primary to-secondary shadow-lg'> <Sparkles className='w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground animate-pulse' /> </div> <div> <h2 className='text-base sm:text-xl font-bold bg-linear-to-r from-primary to-secondary bg-clip-text text-transparent'> Nano Banana AI 绘画创作 </h2> <p className='text-xs text-muted-foreground hidden sm:block'> 描述您的创意，AI 为您创作精美图像 </p> </div> </div> {/* 上传图片区域 */} {uploadedImages.length > 0 && ( <div className='flex flex-wrap gap-1.5 sm:gap-2'> {uploadedImages.map((img, index) => ( <div key={index} className='relative group w-16 h-16 sm:w-20 sm:h-20 rounded-lg sm:rounded-xl overflow-hidden border-2 border-border hover:border-primary transition-all duration-300' > <Image src={img} alt={`上传 ${index + 1}`} fill className='object-cover' /> <button onClick={() => handleRemoveImage(index)} className={`absolute top-1 right-1 w-5 h-5 rounded-full bg-destructive/80 backdrop-blur-sm flex items-center justify-center transition-opacity duration-300 ${ isMobileDevice ? 'opacity-100' : 'opacity-0 group-hover:opacity-100' }`} > <X className='w-3 h-3 text-destructive-foreground' /> </button> </div> ))} </div> )} {/* 输入框 */} <div className='relative'> <textarea value={inputMessage} onChange={(e) => setInputMessage(e.target.value)} onKeyDown={(e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault() handleSendMessage() } }} placeholder='描述您想要创作的图像...' disabled={isDrawing} className='w-full px-3 sm:px-4 py-2.5 sm:py-3 rounded-xl sm:rounded-2xl bg-background/50 border-2 border-border focus:border-primary focus:outline-none resize-none transition-all duration-300 text-sm sm:text-base text-foreground placeholder:text-muted-foreground disabled:opacity-50 disabled:cursor-not-allowed min-h-[80px] sm:min-h-[100px]' rows={3} maxLength={2000} /> <div className='absolute bottom-2 sm:bottom-3 right-2 sm:right-3 text-xs text-muted-foreground bg-background/80 px-1.5 sm:px-2 py-0.5 sm:py-1 rounded'> {inputMessage.length}/2000 </div> </div> {/* 操作按钮 */} <div className='flex items-center gap-2 sm:gap-3'> <input ref={fileInputRef} type='file' accept='image/*' onChange={handleImageUpload} className='hidden' multiple={false} /> <button onClick={() => fileInputRef.current?.click()} disabled={isDrawing || uploadedImages.length >= 3} className='flex items-center gap-1.5 sm:gap-2 px-3 sm:px-4 py-2 sm:py-2.5 rounded-lg sm:rounded-xl bg-muted/50 hover:bg-muted border border-border hover:border-primary/50 text-muted-foreground hover:text-foreground transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed' > <ImagePlus className='w-4 h-4' /> <span className='text-xs sm:text-sm font-medium hidden xs:inline'>上传</span> {uploadedImages.length > 0 && ( <span className='text-xs bg-primary/20 text-primary px-1.5 sm:px-2 py-0.5 rounded-full'> {uploadedImages.length}/3 </span> )} </button> <div className='flex-1' /> <button onClick={handleSendMessage} disabled={ (!inputMessage.trim() && uploadedImages.length === 0) || isDrawing } className='group relative overflow-hidden rounded-xl sm:rounded-2xl bg-linear-to-r from-primary to-secondary p-0.5 hover:shadow-xl hover:shadow-primary/25 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:shadow-none hover:scale-105' > <div className='relative bg-card/90 backdrop-blur-sm rounded-xl sm:rounded-2xl px-4 sm:px-8 py-2 sm:py-3 group-hover:bg-transparent transition-all duration-300'> <div className='flex items-center gap-1.5 sm:gap-2 text-foreground group-hover:text-primary-foreground transition-colors duration-300'> {isDrawing ? ( <> <RefreshCw className='w-4 h-4 sm:w-5 sm:h-5 animate-spin' /> <span className='text-xs sm:text-base font-semibold'>创作中...</span> </> ) : ( <> <Send className='w-4 h-4 sm:w-5 sm:h-5' /> <span className='text-xs sm:text-base font-semibold'>开始创作</span> </> )} </div> </div> </button> </div> </div> </div> {/* 作品列表区域 - 低调展示 */} <div className='flex-1 overflow-hidden flex flex-col'> <div className='text-xs text-muted-foreground mb-1.5 sm:mb-2 px-1'> 创作历史 </div> <div ref={scrollContainerRef} className='flex-1 overflow-y-auto space-y-2 sm:space-y-3 pr-1 sm:pr-2 custom-scrollbar animate-fade-in-up' style={{ animationDelay: '0.2s' }} > {dataSource.map((item, index) => ( <div key={item.uid} className='group bg-card/40 backdrop-blur-sm rounded-xl sm:rounded-2xl border border-border/50 hover:border-border hover:bg-card/60 shadow-sm hover:shadow-md transition-all duration-300 p-2.5 sm:p-4' > <div className='flex gap-2 sm:gap-3'> {/* 图片区域 */} {(item.info.imgUrlCdn || item.info.visionImgList) && ( <div className='flex-shrink-0'> {/* Vision 图片列表 */} {Array.isArray(item.info.visionImgList) && item.info.visionImgList.length > 0 && ( <div className='grid grid-cols-2 gap-1.5 sm:gap-2'> {item.info.visionImgList.map((img, imgIndex) => ( <div key={imgIndex} className='relative w-16 h-16 sm:w-24 sm:h-24 rounded-lg sm:rounded-xl overflow-hidden border border-border hover:border-primary transition-all duration-300 cursor-pointer group/img' onClick={() => setPreviewImage(img.url)} > <Image src={img.url} alt={`Vision ${imgIndex + 1}`} fill className='object-cover' /> <div className='absolute inset-0 bg-black/0 group-hover/img:bg-black/40 transition-colors duration-300 flex items-center justify-center'> <Maximize2 className='w-6 h-6 text-white opacity-0 group-hover/img:opacity-100 transition-opacity duration-300' /> </div> {/* 操作按钮 - 移动端禁用点击避免阻挡预览 */} <div className='absolute bottom-1 right-1 flex gap-1 opacity-0 group-hover/img:opacity-100 transition-opacity duration-300 pointer-events-none sm:pointer-events-auto'> <button onClick={(e) => { e.stopPropagation() handleDownload(img.url) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > <Download className='w-3 h-3 text-primary-foreground' /> </button> <button onClick={(e) => { e.stopPropagation() handleCopy(img.url) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > {copiedText === img.url ? ( <Check className='w-3 h-3 text-primary-foreground' /> ) : ( <Copy className='w-3 h-3 text-primary-foreground' /> )} </button> </div> </div> ))} </div> )} {/* CDN 图片 */} {Array.isArray(item.info.imgUrlCdn) ? ( <div className='grid grid-cols-2 gap-1.5 sm:gap-2'> {item.info.imgUrlCdn.map((url, imgIndex) => ( <div key={imgIndex} className='relative w-16 h-16 sm:w-24 sm:h-24 rounded-lg sm:rounded-xl overflow-hidden border border-border hover:border-primary transition-all duration-300 cursor-pointer group/img' onClick={() => setPreviewImage(url)} > <Image src={url} alt={`图片 ${imgIndex + 1}`} fill className='object-cover' /> <div className='absolute inset-0 bg-black/0 group-hover/img:bg-black/40 transition-colors duration-300 flex items-center justify-center'> <Maximize2 className='w-6 h-6 text-white opacity-0 group-hover/img:opacity-100 transition-opacity duration-300' /> </div> <div className='absolute top-1 right-1 bg-black/60 backdrop-blur-sm text-white text-xs px-2 py-0.5 rounded-lg'> {imgIndex + 1} </div> {/* 操作按钮 - 移动端禁用点击避免阻挡预览 */} <div className='absolute bottom-1 right-1 flex gap-1 opacity-0 group-hover/img:opacity-100 transition-opacity duration-300 pointer-events-none sm:pointer-events-auto'> <button onClick={(e) => { e.stopPropagation() handleDownload(url) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > <Download className='w-3 h-3 text-primary-foreground' /> </button> <button onClick={(e) => { e.stopPropagation() handleCopy(url) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > {copiedText === url ? ( <Check className='w-3 h-3 text-primary-foreground' /> ) : ( <Copy className='w-3 h-3 text-primary-foreground' /> )} </button> </div> </div> ))} </div> ) : item.info.imgUrlCdn ? ( <div className='relative w-20 h-20 sm:w-28 sm:h-28 rounded-lg sm:rounded-xl overflow-hidden border border-border hover:border-primary transition-all duration-300 cursor-pointer group/img' onClick={() => setPreviewImage(item.info.imgUrlCdn as string) } > <Image src={item.info.imgUrlCdn} alt='图片' fill className='object-cover' /> <div className='absolute inset-0 bg-black/0 group-hover/img:bg-black/40 transition-colors duration-300 flex items-center justify-center'> <Maximize2 className='w-6 h-6 text-white opacity-0 group-hover/img:opacity-100 transition-opacity duration-300' /> </div> {/* 操作按钮 - 移动端禁用点击避免阻挡预览 */} <div className='absolute bottom-1 right-1 flex gap-1 opacity-0 group-hover/img:opacity-100 transition-opacity duration-300 pointer-events-none sm:pointer-events-auto'> <button onClick={(e) => { e.stopPropagation() handleDownload(item.info.imgUrlCdn as string) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > <Download className='w-3 h-3 text-primary-foreground' /> </button> <button onClick={(e) => { e.stopPropagation() handleCopy(item.info.imgUrlCdn as string) }} className='w-6 h-6 rounded-lg bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > {copiedText === item.info.imgUrlCdn ? ( <Check className='w-3 h-3 text-primary-foreground' /> ) : ( <Copy className='w-3 h-3 text-primary-foreground' /> )} </button> </div> </div> ) : null} </div> )} {/* 文本内容区域 */} <div className='flex-1 min-w-0 space-y-1.5 sm:space-y-2'> {/* 提示词 */} {getPrompt(item) && ( <div className='space-y-0.5 sm:space-y-1'> <div className='text-xs text-muted-foreground'> 提示词 </div> <p className='text-xs sm:text-sm text-foreground/80 leading-relaxed line-clamp-2'> {getPrompt(item)} </p> <button onClick={() => handleCopy(getPrompt(item))} className='text-xs text-muted-foreground hover:text-foreground transition-colors duration-300 flex items-center gap-1' > {copiedText === getPrompt(item) ? ( <> <Check className='w-3 h-3' /> <span>已复制</span> </> ) : ( <> <Copy className='w-3 h-3' /> <span>复制</span> </> )} </button> </div> )} {/* AI 回复 */} {item.info?.aiMessage && ( <div className='space-y-0.5 sm:space-y-1'> <div className='text-xs text-muted-foreground flex items-center gap-1'> <Sparkles className='w-3 h-3' /> AI 回复 </div> <p className='text-xs sm:text-sm text-foreground/60 leading-relaxed line-clamp-2'> {item.info.aiMessage} </p> </div> )} {/* 时间戳 */} <div className='text-xs text-muted-foreground'> {new Date(Number(item.createTime)).toLocaleString( 'zh-CN', { month: '2-digit', day: '2-digit', hour: '2-digit', minute: '2-digit', } )} </div> </div> </div> </div> ))} {/* 加载更多按钮 */} {isHasMore && dataSource.length > 0 && ( <div className='flex justify-center py-3'> <button onClick={handleLoadMore} disabled={isLoading} className='flex items-center gap-2 px-4 py-2 rounded-xl bg-card/60 backdrop-blur-sm border border-border/50 hover:border-border text-muted-foreground hover:text-foreground transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed text-sm' > <RefreshCw className={`w-4 h-4 transition-transform duration-300 ${ isLoading ? 'animate-spin' : '' }`} /> <span>{isLoading ? '加载中...' : '加载更多'}</span> </button> </div> )} {/* 空状态 */} {dataSource.length === 0 && !isLoading && ( <div className='flex flex-col items-center justify-center h-full space-y-3 opacity-40'> <Sparkles className='w-12 h-12 text-muted-foreground' /> <p className='text-muted-foreground text-sm'>暂无创作历史</p> </div> )} <div ref={messagesEndRef} /> </div> </div> </div> </main> {/* 图片预览弹窗 */} {previewImage && ( <div className='fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center p-2 sm:p-4 animate-fade-in' onClick={() => setPreviewImage(null)} > <div className='relative max-w-4xl max-h-[90vh] w-full' onClick={(e) => e.stopPropagation()} > <Image src={previewImage} alt='预览' width={1200} height={1200} className='rounded-xl sm:rounded-2xl object-contain max-h-[85vh] w-full' /> <div className='absolute top-2 sm:top-4 right-2 sm:right-4 flex gap-1.5 sm:gap-2'> <button onClick={() => handleDownload(previewImage)} className='w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > <Download className='w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground' /> </button> <button onClick={() => handleCopy(previewImage)} className='w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-primary/90 backdrop-blur-sm flex items-center justify-center hover:bg-primary transition-colors duration-300' > {copiedText === previewImage ? ( <Check className='w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground' /> ) : ( <Copy className='w-4 h-4 sm:w-5 sm:h-5 text-primary-foreground' /> )} </button> <button onClick={() => setPreviewImage(null)} className='w-8 h-8 sm:w-10 sm:h-10 rounded-lg sm:rounded-xl bg-destructive/90 backdrop-blur-sm flex items-center justify-center hover:bg-destructive transition-colors duration-300' > <X className='w-4 h-4 sm:w-5 sm:h-5 text-destructive-foreground' /> </button> </div> </div> </div> )} <style jsx global>{` .custom-scrollbar::-webkit-scrollbar { width: 4px; } @media (min-width: 640px) { .custom-scrollbar::-webkit-scrollbar { width: 6px; } } .custom-scrollbar::-webkit-scrollbar-track { background: transparent; } .custom-scrollbar::-webkit-scrollbar-thumb { background: hsl(var(--muted)); border-radius: 3px; } .custom-scrollbar::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground) / 0.5); } `}</style> </> ) }