67 lines
1.9 KiB
TypeScript
67 lines
1.9 KiB
TypeScript
import { useEffect } from 'react'
|
||
|
||
interface HelpPopupProps {
|
||
isOpen: boolean
|
||
onClose: () => void
|
||
}
|
||
|
||
export default function HelpPopup({ isOpen, onClose }: HelpPopupProps) {
|
||
useEffect(() => {
|
||
const handleEscape = (event: KeyboardEvent) => {
|
||
if (event.key === 'Escape') {
|
||
onClose()
|
||
}
|
||
}
|
||
|
||
if (isOpen) {
|
||
document.addEventListener('keydown', handleEscape)
|
||
return () => document.removeEventListener('keydown', handleEscape)
|
||
}
|
||
}, [isOpen, onClose])
|
||
|
||
if (!isOpen) return null
|
||
|
||
return (
|
||
<div
|
||
className="fixed inset-0 bg-transparent flex items-center justify-center z-50"
|
||
onClick={onClose}
|
||
>
|
||
<div
|
||
className="bg-black border border-white p-8 max-w-md w-full mx-4"
|
||
onClick={e => e.stopPropagation()}
|
||
>
|
||
<div className="flex justify-between items-start mb-6">
|
||
<h2 className="text-xl font-bold text-white">About CoolSoup</h2>
|
||
<button onClick={onClose} className="text-white hover:text-gray-300 text-xl">
|
||
×
|
||
</button>
|
||
</div>
|
||
|
||
<div className="text-white space-y-4">
|
||
<p>
|
||
CoolSoup generates visual patterns and converts them to audio through spectral/additive
|
||
synthesis. Create images using mathematical expressions, waveforms, geometric patterns,
|
||
or upload your own photos, then transform them into sound by treating the image as a
|
||
spectrogram.
|
||
</p>
|
||
|
||
<div className="pt-4 border-t border-gray-600">
|
||
<p className="text-sm">
|
||
Created by{' '}
|
||
<a
|
||
href="https://raphaelforment.fr"
|
||
target="_blank"
|
||
rel="noopener noreferrer"
|
||
className="text-white underline hover:text-gray-300"
|
||
>
|
||
Raphaël Forment
|
||
</a>
|
||
{' • License: AGPL-3.0'}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|