Spaces:
Sleeping
Sleeping
File size: 5,548 Bytes
0f5ca68 84cea34 0f5ca68 84cea34 0f5ca68 84cea34 0f5ca68 | 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 |
import React, { useState } from 'react';
import MorseCodeConverter from './components/MorseCodeConverter';
import LeetConverter from './components/LeetConverter';
import BinaryConverter from './components/BinaryConverter';
import Base64Converter from './components/Base64Converter';
import HexConverter from './components/HexConverter';
import EmojiConverter from './components/EmojiConverter';
import TinyLlamaConverter from './components/TinyLlamaConverter';
import MusicGenConverter from './components/MusicGenConverter';
import BrowserView from './components/BrowserView';
import Tabs, { Tab } from './components/Tabs';
function App() {
const [compoundedMessage, setCompoundedMessage] = useState('');
const [sharedInput, setSharedInput] = useState('');
const [copied, setCopied] = useState(false);
const addToCompoundedMessage = (text) => {
setCompoundedMessage((prev) => prev + text + ' ');
};
const clearCompoundedMessage = () => {
setCompoundedMessage('');
};
const copyCompoundedMessage = async () => {
try {
await navigator.clipboard.writeText(compoundedMessage);
setCopied(true);
setTimeout(() => setCopied(false), 2000);
} catch (error) {
console.error('Failed to copy compounded message:', error);
}
};
return (
<div className="min-h-screen bg-black text-white flex flex-col items-center justify-center p-4 animate-slide-up">
<div className="text-center mb-8">
<h1 className="text-5xl md:text-7xl font-extrabold mb-2 text-transparent bg-clip-text animated-gradient gradient-text pulse-glow">
T3XT TR4N5F0RM3R
</h1>
<p className="text-lg md:text-xl text-gray-300 animate-fade-in">
Your one-stop tool for text conversions
</p>
</div>
<div className="w-full max-w-5xl p-6 bg-black border-2 border-white rounded-2xl shadow-2xl hover-glow card-hover transition-all duration-300" role="main" aria-label="Text converter tools">
<Tabs>
<Tab label="Morse Code">
<MorseCodeConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Leet Speak">
<LeetConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Binary">
<BinaryConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Base64">
<Base64Converter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Hex">
<HexConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Emoji">
<EmojiConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="TinyLlama">
<TinyLlamaConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="MusicGen">
<MusicGenConverter addToMessage={addToCompoundedMessage} sharedInput={sharedInput} setSharedInput={setSharedInput} />
</Tab>
<Tab label="Browser">
<BrowserView />
</Tab>
</Tabs>
</div>
<div className="w-full max-w-5xl p-6 mt-8 bg-black border-2 border-white rounded-2xl shadow-2xl hover-glow card-hover transition-all duration-300">
<h2 className="text-2xl font-bold mb-4 text-white">Compounded Message</h2>
<textarea
className="w-full h-48 p-4 bg-black border border-white rounded-md text-white focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500 transition-all duration-300"
value={compoundedMessage}
readOnly
placeholder="Your compounded message will appear here..."
aria-label="Compounded message output"
/>
<div className="flex gap-4 mt-4">
<button
className="px-6 py-3 bg-invader-pink hover:bg-invader-green rounded-md text-black font-semibold transition-all duration-300 hover:shadow-lg active:scale-95"
onClick={copyCompoundedMessage}
disabled={!compoundedMessage}
aria-label="Copy compounded message to clipboard"
>
{copied ? '✓ Copied!' : 'Copy Compounded Message'}
</button>
<button
className="px-6 py-3 bg-gray-700 hover:bg-gray-600 rounded-md text-white font-semibold transition-all duration-300 hover:shadow-lg active:scale-95 disabled:opacity-50 disabled:cursor-not-allowed"
onClick={clearCompoundedMessage}
disabled={!compoundedMessage}
aria-label="Clear compounded message"
>
Clear
</button>
</div>
</div>
<footer className="mt-8 text-center text-gray-500">
<p>
Made with ❤️ by{' '}
<a
href="https://github.com/kwizzlesurp10-ctrl"
target="_blank"
rel="noopener noreferrer"
className="text-invader-green hover:text-invader-pink transition-colors duration-300 hover:underline"
>
kwizzlesurp10-ctrl
</a>
</p>
</footer>
</div>
);
}
export default App;
|