Scribd
Upload
25 views5 pages

FiveM Menu with Game Powers and Settings

The document is a React component for a FiveM menu that allows users to toggle various game settings such as God Mode, Super Jump, and Noclip. It features a tab navigation system for different sections, including a 'main' section with power and movement settings and a 'teleport' section that is currently under development. The component utilizes state management to handle user interactions and updates to the settings dynamically.

Uploaded by

seyitahmetaydin2010
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
25 views5 pages

FiveM Menu with Game Powers and Settings

The document is a React component for a FiveM menu that allows users to toggle various game settings such as God Mode, Super Jump, and Noclip. It features a tab navigation system for different sections, including a 'main' section with power and movement settings and a 'teleport' section that is currently under development. The component utilizes state management to handle user interactions and updates to the settings dynamically.

Uploaded by

seyitahmetaydin2010
Copyright
© All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd

import React, { useState } from 'react';

export default function FiveMMenu() {


const [activeTab, setActiveTab] = useState('main');
const [settings, setSettings] = useState({
godMode: false,
superJump: false,
infiniteStamina: false,
noclip: true,
bypass: true,
speed: 10,
visibility: 'visible'
});

const toggleSetting = (key) => {


setSettings(prev => ({ ...prev, [key]: !prev[key] }));
};

const updateSpeed = (value) => {


setSettings(prev => ({ ...prev, speed: value }));
};

const cycleVisibility = () => {


const modes = ['visible', 'semi', 'invisible'];
const current = [Link]([Link]);
const next = (current + 1) % [Link];
setSettings(prev => ({ ...prev, visibility: modes[next] }));
};

return (
<div className="min-h-screen bg-gradient-to-br from-purple-900 via-blue-900 to-
indigo-900 flex items-center justify-center p-8 font-mono">
<div className="w-full max-w-2xl">
{/* ASCII Header */}
<pre className="text-cyan-400 text-xs md:text-sm mb-6 whitespace-pre
leading-tight opacity-90 select-none">
{`
███████╗██╗ ██╗ █████╗ ██████╗ ██╗ ██╗
██╔════╝██║ ██║██╔══██╗██╔══██╗██║ ██╔╝
███████╗███████║███████║██████╔╝█████╔╝
╚════██║██╔══██║██╔══██║██╔══██╗██╔═██╗
███████║██║ ██║██║ ██║██║ ██║██║ ██╗
╚══════╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝╚═╝ ╚═╝
`}
</pre>

{/* Main Container */}


<div className="bg-black/40 backdrop-blur-sm border-2 border-cyan-500/50 p-
6 rounded-lg shadow-2xl">
{/* Tab Navigation */}
<div className="flex gap-4 mb-6 pb-4 border-b border-cyan-500/30">
<button
onClick={() => setActiveTab('main')}
className={`text-sm px-4 py-1 transition-colors ${
activeTab === 'main'
? 'text-cyan-400 bg-cyan-500/20'
: 'text-gray-400 hover:text-cyan-300'
}`}
>
[ MAIN ]
</button>
<button
onClick={() => setActiveTab('teleport')}
className={`text-sm px-4 py-1 transition-colors ${
activeTab === 'teleport'
? 'text-cyan-400 bg-cyan-500/20'
: 'text-gray-400 hover:text-cyan-300'
}`}
>
[ TELEPORT ]
</button>
</div>

{activeTab === 'main' && (


<div className="space-y-4">
{/* Powers Section */}
<div className="border border-cyan-500/30 p-4 bg-cyan-500/5">
<div className="text-cyan-400 mb-3 text-sm">╔═══ POWERS ═══╗</div>

{/* God Mode */}


<div className="flex justify-between items-center mb-3 pl-2">
<span className="text-gray-300 text-sm">│ God Mode</span>
<button
onClick={() => toggleSetting('godMode')}
className="w-12 h-6 border border-cyan-500/50 relative
transition-colors"
style={{ backgroundColor: [Link] ? '#22d3ee' :
'#1e293b' }}
>
<span className="absolute text-[10px] inset-0 flex items-center
justify-center text-black font-bold">
{[Link] ? 'ON' : 'OFF'}
</span>
</button>
</div>

{/* Super Jump */}


<div className="flex justify-between items-center mb-3 pl-2">
<span className="text-gray-300 text-sm">│ Super Jump</span>
<button
onClick={() => toggleSetting('superJump')}
className="w-12 h-6 border border-cyan-500/50 relative
transition-colors"
style={{ backgroundColor: [Link] ? '#22d3ee' :
'#1e293b' }}
>
<span className="absolute text-[10px] inset-0 flex items-center
justify-center text-black font-bold">
{[Link] ? 'ON' : 'OFF'}
</span>
</button>
</div>

{/* Infinite Stamina */}


<div className="flex justify-between items-center pl-2">
<span className="text-gray-300 text-sm">│ Infinite Stamina</span>
<button
onClick={() => toggleSetting('infiniteStamina')}
className="w-12 h-6 border border-cyan-500/50 relative
transition-colors"
style={{ backgroundColor: [Link] ?
'#22d3ee' : '#1e293b' }}
>
<span className="absolute text-[10px] inset-0 flex items-center
justify-center text-black font-bold">
{[Link] ? 'ON' : 'OFF'}
</span>
</button>
</div>

<div className="text-cyan-400 mt-3 text-sm">╚═══════════════╝</div>


</div>

{/* Movement Section */}


<div className="border border-purple-500/30 p-4 bg-purple-500/5">
<div className="text-purple-400 mb-3 text-sm">╔═══ MOVEMENT
═══╗</div>

{/* Noclip */}


<div className="flex justify-between items-center mb-3 pl-2">
<span className="text-gray-300 text-sm">│ Noclip</span>
<button
onClick={() => toggleSetting('noclip')}
className="w-12 h-6 border border-purple-500/50 relative
transition-colors"
style={{ backgroundColor: [Link] ? '#a855f7' :
'#1e293b' }}
>
<span className="absolute text-[10px] inset-0 flex items-center
justify-center text-black font-bold">
{[Link] ? 'ON' : 'OFF'}
</span>
</button>
</div>

{/* Bypass */}


<div className="flex justify-between items-center mb-3 pl-2">
<span className="text-gray-300 text-sm">│ Bypass</span>
<button
onClick={() => toggleSetting('bypass')}
className="w-12 h-6 border border-purple-500/50 relative
transition-colors"
style={{ backgroundColor: [Link] ? '#a855f7' :
'#1e293b' }}
>
<span className="absolute text-[10px] inset-0 flex items-center
justify-center text-black font-bold">
{[Link] ? 'ON' : 'OFF'}
</span>
</button>
</div>

{/* Speed */}


<div className="mb-3 pl-2">
<div className="flex justify-between items-center mb-2">
<span className="text-gray-300 text-sm">│ Speed</span>
<span className="text-purple-400
text-sm">[{[Link]}]</span>
</div>
<div className="flex items-center gap-2 pl-2">
<span className="text-purple-400 text-xs">└─</span>
<input
type="range"
min="1"
max="20"
value={[Link]}
onChange={(e) => updateSpeed(parseInt([Link]))}
className="flex-1 h-1 bg-gray-700 appearance-none cursor-
pointer"
style={{
background: `linear-gradient(to right, #a855f7 0%, #a855f7
${([Link] / 20) * 100}%, #374151 ${([Link] / 20) * 100}%, #374151
100%)`
}}
/>
</div>
</div>

{/* Visibility */}


<div className="flex justify-between items-center pl-2">
<span className="text-gray-300 text-sm">│ Visibility</span>
<button
onClick={cycleVisibility}
className="px-3 py-1 border border-purple-500/50 text-purple-
400 hover:bg-purple-500/20 transition-colors text-xs"
>
{'< ' + [Link]() + ' >'}
</button>
</div>

<div className="text-purple-400 mt-3


text-sm">╚════════════════╝</div>
</div>
</div>
)}

{activeTab === 'teleport' && (


<div className="text-center py-12">
<pre className="text-cyan-400 text-xs mb-4">
{`
╔═══════════════════╗
║ TELEPORT MENU ║
║ Coming Soon... ║
╚═══════════════════╝
`}
</pre>
<p className="text-gray-400 text-sm">Feature in development</p>
</div>
)}

{/* Footer */}


<div className="mt-6 pt-4 border-t border-cyan-500/30 flex justify-
between items-center text-xs">
<span className="text-gray-500">[Link] | v1.0</span>
<span className="text-gray-500">5/8</span>
</div>
</div>
</div>
</div>
);
}

You might also like