Spaces:
Running
Running
File size: 2,259 Bytes
8af739b c21bca9 8af739b 7f6d612 c21bca9 7f6d612 8af739b c21bca9 7f6d612 8af739b c21bca9 7f6d612 ad31128 8af739b ad31128 8af739b 7f6d612 8af739b 7f6d612 8af739b ad31128 8af739b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
'use client'
import React from 'react'
import { X } from '@phosphor-icons/react'
import { motion, AnimatePresence } from 'framer-motion'
interface AboutModalProps {
isOpen: boolean
onClose: () => void
}
export function AboutModal({ isOpen, onClose }: AboutModalProps) {
if (!isOpen) return null
return (
<AnimatePresence>
{isOpen && (
<>
<div className="fixed inset-0 bg-black/50 z-[100]" onClick={onClose} />
<motion.div
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
transition={{ duration: 0.2 }}
className="fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 z-[101]"
>
<div className="bg-white/90 backdrop-blur-xl rounded-2xl shadow-2xl p-4 sm:p-8 w-[90vw] max-w-[400px] border border-white/40 text-center relative mx-4">
{/* Logo */}
<div className="w-16 h-16 sm:w-24 sm:h-24 mx-auto mb-4 sm:mb-6 bg-gradient-to-br from-purple-600 to-blue-600 rounded-xl sm:rounded-2xl flex items-center justify-center shadow-lg">
<span className="text-white font-bold text-2xl sm:text-4xl">R</span>
</div>
{/* Title */}
<h1 className="text-xl sm:text-3xl font-bold text-gray-900 mb-1 sm:mb-2">Reuben OS</h1>
<p className="text-gray-500 text-xs sm:text-sm mb-4 sm:mb-6">Version 1.0.0</p>
{/* Creator Info */}
<div className="text-gray-600 font-medium text-xs sm:text-sm">
Created by a huggingface user <a href="https://huggingface.co/Reubencf" target="_blank" rel="noopener noreferrer" className="text-blue-500 hover:text-blue-600 hover:underline transition-colors">Reubencf</a>
</div>
{/* Close Button */}
<button
onClick={onClose}
className="absolute top-3 right-3 sm:top-4 sm:right-4 text-gray-400 hover:text-gray-600 transition-colors"
>
<X size={18} weight="bold" className="sm:w-5 sm:h-5" />
</button>
</div>
</motion.div>
</>
)
}
</AnimatePresence >
)
} |