Spaces:
Running
Running
File size: 8,752 Bytes
8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 8af739b 7f6d612 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 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 |
'use client'
import React, { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import { X, Minus, Square, Info, UserCircle, Target } from '@phosphor-icons/react'
interface HelpModalProps {
isOpen: boolean
onClose: () => void
}
export function HelpModal({ isOpen, onClose }: HelpModalProps) {
const [windowPos, setWindowPos] = useState({ x: 100, y: 100 })
const [isDragging, setIsDragging] = useState(false)
const [dragStart, setDragStart] = useState({ x: 0, y: 0 })
const handleMouseDown = (e: React.MouseEvent) => {
if ((e.target as HTMLElement).closest('.window-controls')) return
setIsDragging(true)
setDragStart({ x: e.clientX - windowPos.x, y: e.clientY - windowPos.y })
}
const handleMouseMove = (e: MouseEvent) => {
if (isDragging) {
setWindowPos({
x: e.clientX - dragStart.x,
y: e.clientY - dragStart.y,
})
}
}
const handleMouseUp = () => {
setIsDragging(false)
}
React.useEffect(() => {
if (isDragging) {
window.addEventListener('mousemove', handleMouseMove)
window.addEventListener('mouseup', handleMouseUp)
return () => {
window.removeEventListener('mousemove', handleMouseMove)
window.removeEventListener('mouseup', handleMouseUp)
}
}
}, [isDragging, dragStart, windowPos])
return (
<AnimatePresence>
{isOpen && (
<>
{/* Backdrop */}
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="fixed inset-0 bg-black/30 backdrop-blur-sm z-50"
/>
{/* Modal */}
<motion.div
style={{ left: windowPos.x, top: windowPos.y }}
initial={{ scale: 0.9, opacity: 0 }}
animate={{ scale: 1, opacity: 1 }}
exit={{ scale: 0.9, opacity: 0 }}
transition={{ type: "spring", damping: 20, stiffness: 300 }}
className="fixed w-[95vw] max-w-[600px] bg-white rounded-lg shadow-2xl z-50 select-none max-h-[90vh] overflow-hidden flex flex-col"
>
{/* Ubuntu-style Window Header */}
<div
onMouseDown={handleMouseDown}
className="h-10 sm:h-11 bg-gradient-to-b from-[#f6f5f4] to-[#edebe9] border-b border-[#d0d0d0] flex items-center justify-between px-2 sm:px-3 cursor-move rounded-t-lg flex-shrink-0"
>
<div className="flex items-center gap-1.5 sm:gap-2 flex-1 min-w-0">
<div className="flex items-center gap-1 window-controls flex-shrink-0">
<button
onClick={onClose}
className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#E95420] hover:bg-[#d14818] flex items-center justify-center group"
>
<X size={10} weight="bold" className="text-white opacity-0 group-hover:opacity-100 sm:w-3 sm:h-3" />
</button>
<button className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
<Minus size={10} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 sm:w-3 sm:h-3" />
</button>
<button className="w-4 h-4 sm:w-5 sm:h-5 rounded-full bg-[#ddd] hover:bg-[#ccc] flex items-center justify-center group">
<Square size={8} weight="bold" className="text-[#666] opacity-0 group-hover:opacity-100 sm:w-2.5 sm:h-2.5" />
</button>
</div>
<div className="flex items-center gap-1.5 sm:gap-2 ml-1 sm:ml-2 min-w-0">
<Info size={16} weight="fill" className="text-[#E95420] sm:w-[18px] sm:h-[18px] flex-shrink-0" />
<span className="text-xs sm:text-sm font-medium text-[#2c2c2c] truncate">About This Application</span>
</div>
</div>
</div>
{/* Content */}
<div className="p-3 sm:p-6 space-y-3 sm:space-y-5 bg-white rounded-b-lg overflow-y-auto flex-1">
{/* Creator Info */}
<div className="flex items-start gap-2 sm:gap-4 p-3 sm:p-4 bg-gradient-to-r from-[#E95420]/10 to-orange-100 rounded-lg border border-[#E95420]/20">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-[#E95420] to-[#d14818] flex items-center justify-center flex-shrink-0">
<UserCircle size={20} weight="fill" className="text-white sm:w-6 sm:h-6" />
</div>
<div className="min-w-0">
<h3 className="text-sm sm:text-base font-semibold text-[#2c2c2c] mb-0.5 sm:mb-1">Created By</h3>
<p className="text-[#555] font-medium text-xs sm:text-sm truncate">Reuben Chagas Fernandes</p>
</div>
</div>
{/* Purpose */}
<div className="flex items-start gap-2 sm:gap-4 p-3 sm:p-4 bg-blue-50 rounded-lg border border-blue-200">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-full bg-gradient-to-br from-blue-500 to-blue-600 flex items-center justify-center flex-shrink-0">
<Target size={20} weight="fill" className="text-white sm:w-6 sm:h-6" />
</div>
<div className="min-w-0">
<h3 className="text-sm sm:text-base font-semibold text-[#2c2c2c] mb-1 sm:mb-2">Purpose</h3>
<p className="text-[#555] leading-relaxed text-xs sm:text-sm">
This application was created for sharing study material and making it easily
accessible through Claude. Our goal is to provide a seamless platform for
students to collaborate, share resources, and enhance their learning experience.
</p>
</div>
</div>
{/* Features */}
<div className="bg-gradient-to-br from-purple-50 to-pink-50 rounded-lg p-3 sm:p-4 border border-purple-200">
<h4 className="text-xs sm:text-sm font-semibold text-[#2c2c2c] uppercase tracking-wider mb-2 sm:mb-3 flex items-center gap-2">
<span className="w-1 h-3 sm:h-4 bg-[#E95420] rounded-full"></span>
Key Features
</h4>
<ul className="space-y-1.5 sm:space-y-2.5 text-[#555]">
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-blue-500 rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Easy file upload and sharing</span>
</li>
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-purple-500 rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Integration with Claude AI</span>
</li>
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-green-500 rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Public folder for community sharing</span>
</li>
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-[#E95420] rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Exam calendar and organization tools</span>
</li>
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-cyan-500 rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Web browser with CORS proxy support</span>
</li>
<li className="flex items-center gap-2 sm:gap-3">
<span className="w-1.5 h-1.5 sm:w-2 sm:h-2 bg-orange-500 rounded-full flex-shrink-0" />
<span className="text-xs sm:text-sm">Gemini AI chat assistant</span>
</li>
</ul>
</div>
{/* Footer Button */}
<div className="pt-1 sm:pt-2">
<button
onClick={onClose}
className="w-full py-2 sm:py-2.5 bg-[#E95420] hover:bg-[#d14818] text-white rounded-lg text-sm sm:text-base font-medium transition-colors shadow-sm"
>
Close
</button>
</div>
</div>
</motion.div>
</>
)}
</AnimatePresence>
)
} |