Character Info
-
-
-
-
-
-
+
+
+ )
+};
+
+export default CharacterCard;
diff --git a/[core]/esx_multicharacter/web/src/components/CharacterInfo.tsx b/[core]/esx_multicharacter/web/src/components/CharacterInfo.tsx
new file mode 100644
index 00000000..c98727ca
--- /dev/null
+++ b/[core]/esx_multicharacter/web/src/components/CharacterInfo.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { Info, Cake, User2, Briefcase, Trash2 } from 'lucide-react';
+import { Character, Locale } from '../types/Character';
+import { Icon } from '@iconify/react';
+
+interface CharacterInfoProps {
+ character: Character;
+ onClose: () => void;
+ isAllowedtoDelete: boolean;
+ PlayCharacter : () => void;
+ handleDelete: () => void;
+ locale: Locale;
+}
+
+const CharacterInfo: React.FC onSelect(character.id)}
+ >
+
+
+
+
+
+ {character.isActive && (
+
+
+ {character.name}
+
+
+
+
+
+
+ )}
+
+
+ );
+};
+
+export default CharacterInfo;
\ No newline at end of file
diff --git a/[core]/esx_multicharacter/web/src/components/CharacterSelection.tsx b/[core]/esx_multicharacter/web/src/components/CharacterSelection.tsx
new file mode 100644
index 00000000..aaf8140c
--- /dev/null
+++ b/[core]/esx_multicharacter/web/src/components/CharacterSelection.tsx
@@ -0,0 +1,119 @@
+import React, { useState } from 'react';
+import { Plus } from 'lucide-react';
+import { Character, Locale } from '../types/Character';
+import CharacterCard from './CharacterCard';
+import CharacterInfo from './CharacterInfo';
+import Logo from '../assets/esxLogo.png';
+import { fetchNui } from '../utils/fetchNui';
+
+interface CharacterSelectionProps {
+ initialCharacters: Character[];
+ Candelete: boolean;
+ MaxAllowedSlot : number;
+ locale : Locale;
+}
+
+const CharacterSelection: React.FC
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {character.birthDate}
+
+
+
+
+ {character.gender}
+
+
+
+
+ {character.occupation}
+
+
+
+ {isAllowedtoDelete && (
+
+ )}
+
+
+
+ );
+};
+
+export default CharacterSelection;
\ No newline at end of file
diff --git a/[core]/esx_multicharacter/web/src/index.css b/[core]/esx_multicharacter/web/src/index.css
new file mode 100644
index 00000000..ab4f4b38
--- /dev/null
+++ b/[core]/esx_multicharacter/web/src/index.css
@@ -0,0 +1,58 @@
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+ --primary: #ff9800;
+ --primary-dark: #f57c00;
+ --dark-bg: #1c1c1c;
+ --card-bg: #262626;
+}
+
+body {
+ margin: 0;
+ font-family: "Poppins", sans-serif;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ color: white;
+}
+
+@keyframes slideIn {
+ from {
+ transform: translateX(-100%);
+ opacity: 0;
+ }
+ to {
+ transform: translateX(0);
+ opacity: 1;
+ }
+}
+
+@keyframes slideDown {
+ from {
+ max-height: 0;
+ opacity: 0;
+ transform: translateY(-10px);
+ }
+ to {
+ max-height: 500px;
+ opacity: 1;
+ transform: translateY(0);
+ }
+}
+
+.animate-slideIn {
+ animation: slideIn 0.5s ease-out forwards;
+}
+
+.animate-slideDown {
+ animation: slideDown 0.3s ease-out forwards;
+ overflow: hidden;
+}
+
+.transition-all {
+ transition-property: all;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 300ms;
+}
\ No newline at end of file
diff --git a/[core]/esx_multicharacter/web/src/main.tsx b/[core]/esx_multicharacter/web/src/main.tsx
new file mode 100644
index 00000000..f02e9eef
--- /dev/null
+++ b/[core]/esx_multicharacter/web/src/main.tsx
@@ -0,0 +1,7 @@
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(
+
+
+
+
+ 
+
+
+ {locale.title}
+
+ {characters.map(character => (
+
+
+ setShowInfo(null)}
+ isAllowedtoDelete={Candelete}
+ PlayCharacter={PlayCharacter}
+ handleDelete={handleDeleteCharacter}
+ locale={locale}
+ />
+ )}
+
+ ))}
+
+
+
+