├── public
    ├── robots.txt
    ├── banner.png
    ├── favicon.ico
    ├── sounds
    │   ├── new.mp3
    │   └── typing.mp3
    ├── favicon-16x16.png
    ├── favicon-32x32.png
    ├── apple-touch-icon.png
    ├── android-chrome-192x192.png
    ├── android-chrome-512x512.png
    └── site.webmanifest
├── tsconfig.node.tsbuildinfo
├── .vscode
    └── extensions.json
├── postcss.config.js
├── .prettierrc
├── tsconfig.json
├── .gitignore
├── vite.config.ts
├── src
    ├── vite-env.d.ts
    ├── lib
    │   ├── utils.ts
    │   ├── sound.ts
    │   ├── firebase.ts
    │   └── chat.ts
    ├── components
    │   ├── load-more-btn.tsx
    │   ├── ui
    │   │   ├── textarea.tsx
    │   │   ├── label.tsx
    │   │   ├── scroll-progress.tsx
    │   │   ├── input.tsx
    │   │   ├── animated-shiny-text.tsx
    │   │   ├── switch.tsx
    │   │   ├── avatar.tsx
    │   │   ├── scroll-area.tsx
    │   │   ├── rainbow-button.tsx
    │   │   ├── button.tsx
    │   │   ├── card.tsx
    │   │   ├── shine-border.tsx
    │   │   ├── dialog.tsx
    │   │   ├── animated-grid-pattern.tsx
    │   │   ├── alert-dialog.tsx
    │   │   ├── message-bubble.tsx
    │   │   ├── context-menu.tsx
    │   │   └── dropdown-menu.tsx
    │   ├── typing-bubble.tsx
    │   ├── logout-dialog.tsx
    │   ├── users-list.tsx
    │   ├── loader.tsx
    │   ├── message-input.tsx
    │   ├── chat-header.tsx
    │   ├── settings-dialog.tsx
    │   ├── profile-avatar.tsx
    │   └── chat-area.tsx
    ├── context
    │   ├── auth-context.tsx
    │   └── settings-context.tsx
    ├── hooks
    │   ├── useOnlineCount.ts
    │   ├── useOnlineUsers.ts
    │   ├── useTyping.ts
    │   ├── useSettings.ts
    │   ├── useChat.ts
    │   └── useAuth.ts
    ├── pages
    │   ├── chat.tsx
    │   └── home.tsx
    ├── types
    │   └── index.d.ts
    ├── main.tsx
    ├── App.tsx
    ├── index.css
    └── data
    │   └── country-data.ts
├── components.json
├── tsconfig.node.json
├── tsconfig.app.json
├── eslint.config.js
├── LICENSE
├── firebase.json
├── tsconfig.app.tsbuildinfo
├── .rules
├── package.json
├── index.html
├── README.md
├── tailwind.config.ts
└── CONTRIBUTING.md


/public/robots.txt:
--------------------------------------------------------------------------------
1 | User-agent: *


--------------------------------------------------------------------------------
/tsconfig.node.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./vite.config.ts"],"version":"5.6.3"}


--------------------------------------------------------------------------------
/public/banner.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/banner.png


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/sounds/new.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/sounds/new.mp3


--------------------------------------------------------------------------------
/.vscode/extensions.json:
--------------------------------------------------------------------------------
1 | {
2 |     "recommendations": [
3 |         "chflick.firecode"
4 |     ]
5 | }


--------------------------------------------------------------------------------
/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/favicon-16x16.png


--------------------------------------------------------------------------------
/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/favicon-32x32.png


--------------------------------------------------------------------------------
/public/sounds/typing.mp3:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/sounds/typing.mp3


--------------------------------------------------------------------------------
/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | export default {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/devxprite/Chat-World/HEAD/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |     "printWidth": 140,
3 |     "tabWidth": 4,
4 |     "singleQuote": true,
5 |     "arrowParens": "avoid",
6 |     "experimentalTernaries": true
7 | }


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "files": [],
 3 |   "references": [
 4 |     {
 5 |       "path": "./tsconfig.app.json"
 6 |     },
 7 |     {
 8 |       "path": "./tsconfig.node.json"
 9 |     }
10 |   ],
11 |   "compilerOptions": {
12 |     "baseUrl": ".",
13 |     "paths": {
14 |       "@/*": ["./src/*"]
15 |     }
16 |   }
17 | }
18 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Logs
 2 | logs
 3 | *.log
 4 | npm-debug.log*
 5 | yarn-debug.log*
 6 | yarn-error.log*
 7 | pnpm-debug.log*
 8 | lerna-debug.log*
 9 | 
10 | node_modules
11 | dist
12 | dist-ssr
13 | *.local
14 | 
15 | # Editor directories and files
16 | .vscode/*
17 | !.vscode/extensions.json
18 | .idea
19 | .DS_Store
20 | *.suo
21 | *.ntvs*
22 | *.njsproj
23 | *.sln
24 | *.sw?
25 | 
26 | .vercel
27 | pnpm-lock.yaml
28 | 


--------------------------------------------------------------------------------
/vite.config.ts:
--------------------------------------------------------------------------------
 1 | import { defineConfig } from 'vite';
 2 | import react from '@vitejs/plugin-react';
 3 | 
 4 | //@ts-ignore
 5 | import path from 'path';
 6 | 
 7 | //@ts-ignore
 8 | const root = path.resolve(__dirname, 'src');
 9 | 
10 | // https://vite.dev/config/
11 | export default defineConfig({
12 |     plugins: [react()],
13 |     resolve: {
14 |         alias: {
15 |             '@': path.resolve(__dirname, './src'),
16 |         },
17 |     },
18 | });
19 | 


--------------------------------------------------------------------------------
/src/vite-env.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="vite/client" />
 2 | 
 3 | 
 4 | 
 5 | interface ImportMetaEnv {
 6 |     readonly VITE_FIREBASE_API_KEY: string;
 7 |     readonly VITE_FIREBASE_AUTH_DOMAIN: string;
 8 |     readonly VITE_FIREBASE_PROJECT_ID: string;
 9 |     readonly VITE_FIREBASE_STORAGE_BUCKET: string;
10 |     readonly VITE_FIREBASE_MESSAGING_SENDER_ID: string;
11 |     readonly VITE_FIREBASE_APP_ID: string;
12 |     readonly VITE_IPINFO_TOKEN: string;
13 | }
14 | 


--------------------------------------------------------------------------------
/components.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "https://ui.shadcn.com/schema.json",
 3 |   "style": "new-york",
 4 |   "rsc": false,
 5 |   "tsx": true,
 6 |   "tailwind": {
 7 |     "config": "tailwind.config.ts",
 8 |     "css": "src/index.css",
 9 |     "baseColor": "neutral",
10 |     "cssVariables": true,
11 |     "prefix": ""
12 |   },
13 |   "aliases": {
14 |     "components": "@/components",
15 |     "utils": "@/lib/utils",
16 |     "ui": "@/components/ui",
17 |     "lib": "@/lib",
18 |     "hooks": "@/hooks"
19 |   }
20 | }


--------------------------------------------------------------------------------
/src/lib/utils.ts:
--------------------------------------------------------------------------------
 1 | import { twMerge } from 'tailwind-merge';
 2 | import { clsx, type ClassValue } from 'clsx';
 3 | import { format, isToday, isYesterday, isThisWeek } from 'date-fns';
 4 | 
 5 | export function cn(...inputs: ClassValue[]) {
 6 |     return twMerge(clsx(inputs));
 7 | }
 8 | 
 9 | export function formatDateCalendar(date: Date): string {
10 |     if (isToday(date)) return 'Today';
11 |     else if (isYesterday(date)) return 'Yesterday';
12 |     else if (isThisWeek(date)) return format(date, 'eeee');
13 |     else return format(date, 'MMM d, yyyy');
14 | }
15 | 


--------------------------------------------------------------------------------
/tsconfig.node.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022",
 4 |     "lib": ["ES2023"],
 5 |     "module": "ESNext",
 6 |     "skipLibCheck": true,
 7 | 
 8 |     /* Bundler mode */
 9 |     "moduleResolution": "bundler",
10 |     "allowImportingTsExtensions": true,
11 |     "isolatedModules": true,
12 |     "moduleDetection": "force",
13 |     "noEmit": true,
14 | 
15 |     /* Linting */
16 |     "strict": true,
17 |     "noUnusedLocals": true,
18 |     "noUnusedParameters": true,
19 |     "noFallthroughCasesInSwitch": true
20 |   },
21 |   "include": ["vite.config.ts"]
22 | }
23 | 


--------------------------------------------------------------------------------
/public/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Chat World",
 3 |     "short_name": "Chat World",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/android-chrome-512x512.png",
12 |             "sizes": "512x512",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#000000",
17 |     "background_color": "#000000",
18 |     "display": "standalone",
19 |     "orientation": "portrait",
20 |     "scope": "/",
21 |     "start_url": "/"
22 | }


--------------------------------------------------------------------------------
/src/components/load-more-btn.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils';
 2 | import { RefreshCcw } from 'lucide-react';
 3 | 
 4 | const LoadMore = ({ onClick, isLoading }: { onClick?: () => void; isLoading: boolean }) => (
 5 |     <button
 6 |         className={cn(
 7 |             'flex gap-1 items-center flex-col justify-center my-1 mb-5 text-muted-foreground/75 text-sm',
 8 |             isLoading && 'opacity-50'
 9 |         )}
10 |         disabled={isLoading}
11 |         onClick={onClick}
12 |     >
13 |         <RefreshCcw className={cn('!size-6', isLoading && 'animate-spin')} />
14 |         Load older messages
15 |     </button>
16 | );
17 | 
18 | export default LoadMore;
19 | 


--------------------------------------------------------------------------------
/src/lib/sound.ts:
--------------------------------------------------------------------------------
 1 | type SoundType = 'newMessage' | 'typing';
 2 | 
 3 | class SoundManager {
 4 |     private readonly sounds: Record<SoundType, HTMLAudioElement>;
 5 | 
 6 |     constructor() {
 7 |         this.sounds = {
 8 |             newMessage: new Audio('/sounds/new.mp3'),
 9 |             typing: new Audio('/sounds/typing.mp3'),
10 |         };
11 | 
12 |         this.sounds.newMessage.volume = 0.8;
13 |         this.sounds.typing.volume = 0.6;
14 |     }
15 | 
16 |     play(type: SoundType): void {
17 |         this.sounds[type]?.play().catch(error => console.error(`Error playing ${type} sound:`, error));
18 |     }
19 | }
20 | 
21 | export const soundManager = new SoundManager();
22 | 


--------------------------------------------------------------------------------
/src/context/auth-context.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, useContext, ReactNode } from 'react';
 2 | import useAuth from '../hooks/useAuth';
 3 | 
 4 | type AuthContextType = ReturnType<typeof useAuth>;
 5 | const AuthContext = createContext<AuthContextType | undefined>(undefined);
 6 | 
 7 | export function AuthProvider({ children }: { children: ReactNode }) {
 8 |     const auth = useAuth();
 9 |     return <AuthContext.Provider value={auth}>{children}</AuthContext.Provider>;
10 | }
11 | 
12 | export function useAuthContext() {
13 |     const context = useContext(AuthContext);
14 |     if (context === undefined) throw new Error('useAuthContext must be used within an AuthProvider');
15 |     return context;
16 | }
17 | 


--------------------------------------------------------------------------------
/src/components/ui/textarea.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Textarea = React.forwardRef<
 6 |   HTMLTextAreaElement,
 7 |   React.ComponentProps<"textarea">
 8 | >(({ className, ...props }, ref) => {
 9 |   return (
10 |     <textarea
11 |       className={cn(
12 |         "flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
13 |         className
14 |       )}
15 |       ref={ref}
16 |       {...props}
17 |     />
18 |   )
19 | })
20 | Textarea.displayName = "Textarea"
21 | 
22 | export { Textarea }
23 | 


--------------------------------------------------------------------------------
/src/lib/firebase.ts:
--------------------------------------------------------------------------------
 1 | import { FirebaseOptions, initializeApp } from 'firebase/app';
 2 | import { getDatabase } from 'firebase/database';
 3 | import { getFirestore } from 'firebase/firestore';
 4 | 
 5 | const firebaseConfig: FirebaseOptions = {
 6 |     apiKey: import.meta.env.VITE_FIREBASE_API_KEY,
 7 |     authDomain: import.meta.env.VITE_FIREBASE_AUTH_DOMAIN,
 8 |     projectId: import.meta.env.VITE_FIREBASE_PROJECT_ID,
 9 |     storageBucket: import.meta.env.VITE_FIREBASE_STORAGE_BUCKET,
10 |     messagingSenderId: import.meta.env.VITE_FIREBASE_MESSAGING_SENDER_ID,
11 |     appId: import.meta.env.VITE_FIREBASE_APP_ID,
12 | };
13 | 
14 | const app = initializeApp(firebaseConfig);
15 | 
16 | const db = getFirestore(app);
17 | const rtdb = getDatabase();
18 | 
19 | export { db, rtdb };
20 | 


--------------------------------------------------------------------------------
/src/hooks/useOnlineCount.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { onValue, query, ref, orderByChild, equalTo } from 'firebase/database';
 3 | import { rtdb } from '../lib/firebase';
 4 | 
 5 | const useOnlineCount = () => {
 6 |     const [onlineCount, setOnlineCount] = useState<number>(0);
 7 | 
 8 |     useEffect(() => {
 9 |         const countQuery = query(ref(rtdb, 'userStatus'), orderByChild('isOnline'), equalTo(true));
10 | 
11 |         const unsubscribe = onValue(
12 |             countQuery,
13 |             snapshot => setOnlineCount(snapshot.size),
14 |             error => console.error('Error in online count subscription:', error)
15 |         );
16 | 
17 |         return () => unsubscribe();
18 |     }, []);
19 | 
20 |     return { onlineCount };
21 | };
22 | 
23 | export default useOnlineCount;
24 | 


--------------------------------------------------------------------------------
/src/context/settings-context.tsx:
--------------------------------------------------------------------------------
 1 | import { createContext, ReactNode, useContext } from 'react';
 2 | import useSettings from '../hooks/useSettings';
 3 | 
 4 | type SettingsContextType = ReturnType<typeof useSettings>;
 5 | const SettingsContext = createContext<SettingsContextType | undefined>(undefined);
 6 | 
 7 | const SettingsProvider = ({ children }: { children: ReactNode }) => {
 8 |     const settingsData = useSettings();
 9 |     return <SettingsContext.Provider value={settingsData}>{children}</SettingsContext.Provider>;
10 | };
11 | 
12 | const useSettingsContext = () => {
13 |     const context = useContext(SettingsContext);
14 |     if (context === undefined) throw new Error('useSettingsContext must be used within a SettingsProvider');
15 | 
16 |     return context;
17 | };
18 | 
19 | export { SettingsProvider, useSettingsContext };
20 | 


--------------------------------------------------------------------------------
/tsconfig.app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     "compilerOptions": {
 3 |         "target": "ES2020",
 4 |         "useDefineForClassFields": true,
 5 |         "lib": ["ES2020", "DOM", "DOM.Iterable"],
 6 |         "module": "ESNext",
 7 |         "skipLibCheck": true,
 8 | 
 9 |         /* Bundler mode */
10 |         "moduleResolution": "bundler",
11 |         "allowImportingTsExtensions": true,
12 |         "isolatedModules": true,
13 |         "moduleDetection": "force",
14 |         "noEmit": true,
15 |         "jsx": "react-jsx",
16 | 
17 |         /* Linting */
18 |         "strict": true,
19 |         "noUnusedLocals": true,
20 |         "noUnusedParameters": true,
21 |         "noFallthroughCasesInSwitch": true,
22 | 
23 |         "baseUrl": ".",
24 |         "paths": {
25 |             "@/*": ["./src/*"]
26 |         }
27 |     },
28 |     "include": ["src"]
29 | }
30 | 


--------------------------------------------------------------------------------
/src/components/ui/label.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as LabelPrimitive from "@radix-ui/react-label"
 5 | import { cva, type VariantProps } from "class-variance-authority"
 6 | 
 7 | import { cn } from "@/lib/utils"
 8 | 
 9 | const labelVariants = cva(
10 |   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
11 | )
12 | 
13 | const Label = React.forwardRef<
14 |   React.ElementRef<typeof LabelPrimitive.Root>,
15 |   React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
16 |     VariantProps<typeof labelVariants>
17 | >(({ className, ...props }, ref) => (
18 |   <LabelPrimitive.Root
19 |     ref={ref}
20 |     className={cn(labelVariants(), className)}
21 |     {...props}
22 |   />
23 | ))
24 | Label.displayName = LabelPrimitive.Root.displayName
25 | 
26 | export { Label }
27 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-progress.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { cn } from '@/lib/utils';
 4 | import { motion, useScroll, useSpring } from 'motion/react';
 5 | 
 6 | interface ScrollProgressProps {
 7 |     className?: string;
 8 |     container: React.RefObject<HTMLDivElement>;
 9 | }
10 | 
11 | export default function ScrollProgress({ className, container }: ScrollProgressProps) {
12 | 
13 |     const { scrollYProgress } = useScroll({
14 |         container: container,
15 |         layoutEffect: false,
16 |     });
17 | 
18 |     const scaleX = useSpring(scrollYProgress, {
19 |         stiffness: 500,
20 |         damping: 50,
21 |         restDelta: 0.001,
22 |     });
23 | 
24 |     return (
25 |         <motion.div className={cn('absolute inset-x-0 top-0 z-40 h-1 origin-left gradient max-w-[100dvw]', className)} style={{ scaleX }} />
26 |     );
27 | }
28 | 


--------------------------------------------------------------------------------
/src/components/ui/input.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
 6 |   ({ className, type, ...props }, ref) => {
 7 |     return (
 8 |       <input
 9 |         type={type}
10 |         className={cn(
11 |           "flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-base shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
12 |           className
13 |         )}
14 |         ref={ref}
15 |         {...props}
16 |       />
17 |     )
18 |   }
19 | )
20 | Input.displayName = "Input"
21 | 
22 | export { Input }
23 | 


--------------------------------------------------------------------------------
/eslint.config.js:
--------------------------------------------------------------------------------
 1 | import js from '@eslint/js';
 2 | import globals from 'globals';
 3 | import reactHooks from 'eslint-plugin-react-hooks';
 4 | import reactRefresh from 'eslint-plugin-react-refresh';
 5 | import tseslint from 'typescript-eslint';
 6 | 
 7 | export default tseslint.config(
 8 |     { ignores: ['dist'] },
 9 |     {
10 |         extends: [js.configs.recommended, ...tseslint.configs.recommended],
11 |         files: ['**/*.{ts,tsx}'],
12 |         languageOptions: {
13 |             ecmaVersion: 2020,
14 |             globals: globals.browser,
15 |         },
16 |         plugins: {
17 |             'react-hooks': reactHooks,
18 |             'react-refresh': reactRefresh,
19 |         },
20 |         rules: {
21 |             ...reactHooks.configs.recommended.rules,
22 |             'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
23 |             'no-unused-vars': 'off',
24 |         },
25 |     }
26 | );
27 | 


--------------------------------------------------------------------------------
/src/pages/chat.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import UsersList from '../components/users-list';
 3 | import ChatArea from '../components/chat-area';
 4 | import ChatHeader from '../components/chat-header';
 5 | import { useAuthContext } from '../context/auth-context';
 6 | import Loader from '@/components/loader';
 7 | 
 8 | const Chat = () => {
 9 |     const { user, isLoading } = useAuthContext();
10 |     const [showUsers, setShowUsers] = useState(false);
11 | 
12 |     if (isLoading || !user) return <Loader />;
13 | 
14 |     return (
15 |         <div className="md:grid grid-cols-[20rem_1fr] h-dvh overflow-hidden">
16 |             <div className="px-4 border-b border-r h-12 grid place-items-center max-md:hidden">
17 |                 <h2 className="text-lg font-semibold text-muted-foreground">Online Users</h2>
18 |             </div>
19 |             <ChatHeader user={user} setShowUsers={setShowUsers} showUsers={showUsers} />
20 |             <UsersList showUsers={showUsers} />
21 |             <ChatArea />
22 |         </div>
23 |     );
24 | };
25 | 
26 | export default Chat;
27 | 


--------------------------------------------------------------------------------
/src/types/index.d.ts:
--------------------------------------------------------------------------------
 1 | import countries from '../data/country-data';
 2 | 
 3 | type FirebaseTimestamp = firebase.firestore.Timestamp;
 4 | 
 5 | export interface User {
 6 |     id: string;
 7 |     name: string;
 8 |     userAgent: string;
 9 |     typingTimeout?: NodeJS.Timeout;
10 |     createdAt?: FirebaseTimestamp;
11 |     country: keyof typeof countries;
12 | }
13 | 
14 | export interface UserStatus {
15 |     id: User['id'];
16 |     name: User['name'];
17 |     isOnline: boolean;
18 |     updatedAt: FirebaseTimestamp;
19 | }
20 | 
21 | export interface TypingStatus {
22 |     id: User['id'];
23 |     name: User['name'];
24 |     isTyping: boolean;
25 |     updatedAt: FirebaseTimestamp;
26 | }
27 | 
28 | export interface Message {
29 |     id: string;
30 |     content: string;
31 |     timestamp: FirebaseTimestamp;
32 | 
33 |     userId: User['id'];
34 |     userName: User['name'];
35 |     userCountry: User['country'];
36 | }
37 | 
38 | export interface Settings {
39 |     autoScroll: boolean;
40 |     soundEnabled: boolean;
41 |     scrollIndicator: boolean;
42 |     profanityFilter: boolean;
43 | }
44 | 


--------------------------------------------------------------------------------
/src/main.tsx:
--------------------------------------------------------------------------------
 1 | import './index.css';
 2 | import App from './App.tsx';
 3 | import Loader from './components/loader.tsx';
 4 | import { createRoot } from 'react-dom/client';
 5 | import { lazy, StrictMode, Suspense } from 'react';
 6 | import { SettingsProvider } from './context/settings-context.tsx';
 7 | import { Toaster } from 'react-hot-toast';
 8 | import { Analytics } from '@vercel/analytics/react';
 9 | import { SpeedInsights } from '@vercel/speed-insights/react';
10 | import ReactGA from 'react-ga4';
11 | 
12 | const AuthProvider = lazy(() => import('./context/auth-context').then(module => ({ default: module.AuthProvider })));
13 | 
14 | ReactGA.initialize('G-KEZHDV7Y1X');
15 | 
16 | createRoot(document.getElementById('root')!).render(
17 |     <StrictMode>
18 |         <Analytics />
19 |         <SpeedInsights />
20 | 
21 |         <Suspense key={'layout'} fallback={<Loader />}>
22 |             <AuthProvider>
23 |                 <SettingsProvider>
24 |                     <App />
25 |                     <Toaster />
26 |                 </SettingsProvider>
27 |             </AuthProvider>
28 |         </Suspense>
29 |     </StrictMode>
30 | );


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2025 Prateek Singh
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.


--------------------------------------------------------------------------------
/src/components/ui/animated-shiny-text.tsx:
--------------------------------------------------------------------------------
 1 | import { CSSProperties, FC, ReactNode } from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | 
 5 | interface AnimatedShinyTextProps {
 6 |   children: ReactNode;
 7 |   className?: string;
 8 |   shimmerWidth?: number;
 9 | }
10 | 
11 | const AnimatedShinyText: FC<AnimatedShinyTextProps> = ({
12 |   children,
13 |   className,
14 |   shimmerWidth = 100,
15 | }) => {
16 |   return (
17 |     <p
18 |       style={
19 |         {
20 |           "--shiny-width": `${shimmerWidth}px`,
21 |         } as CSSProperties
22 |       }
23 |       className={cn(
24 |         "mx-auto max-w-md text-neutral-600/70 dark:text-neutral-400/70",
25 | 
26 |         // Shine effect
27 |         "animate-shiny-text bg-clip-text bg-no-repeat [background-position:0_0] [background-size:var(--shiny-width)_100%] [transition:background-position_1s_cubic-bezier(.6,.6,0,1)_infinite]",
28 | 
29 |         // Shine gradient
30 |         "bg-gradient-to-r from-transparent via-black/80 via-50% to-transparent  dark:via-white/80",
31 | 
32 |         className,
33 |       )}
34 |     >
35 |       {children}
36 |     </p>
37 |   );
38 | };
39 | 
40 | export default AnimatedShinyText;
41 | 


--------------------------------------------------------------------------------
/src/hooks/useOnlineUsers.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { query, ref, orderByChild, onValue, limitToLast } from 'firebase/database';
 3 | import { rtdb } from '../lib/firebase';
 4 | 
 5 | import { UserStatus } from '../types';
 6 | import { reverse } from 'lodash';
 7 | 
 8 | interface UseOnlineUsersOptions {
 9 |     limit?: number;
10 | }
11 | 
12 | const useOnlineUsers = ({ limit = 25 }: UseOnlineUsersOptions = {}) => {
13 |     const [users, setUsers] = useState<UserStatus[]>([]);
14 | 
15 |     useEffect(() => {
16 |         const userQuery = query(ref(rtdb, 'userStatus'), orderByChild('updatedAt'), limitToLast(limit));
17 | 
18 |         const unsubscribe = onValue(userQuery, snapshot => {
19 |             const usersData: UserStatus[] = [];
20 | 
21 |             snapshot.forEach(childSnapshot => {
22 |                 const user = childSnapshot.val();
23 |                 usersData.push({ id: childSnapshot.key, ...user });
24 |             });
25 | 
26 |             setUsers(reverse(usersData));
27 |         });
28 | 
29 |         return () => unsubscribe();
30 |     }, [limit]);
31 | 
32 |     return { users };
33 | };
34 | 
35 | export default useOnlineUsers;
36 | 


--------------------------------------------------------------------------------
/src/components/typing-bubble.tsx:
--------------------------------------------------------------------------------
 1 | import { cn } from '@/lib/utils';
 2 | import { TypingStatus } from '@/types';
 3 | import { AnimatePresence, motion } from 'motion/react';
 4 | 
 5 | const TypingBubble = ({ typingUsers }: { typingUsers: TypingStatus[] }) => {
 6 |     const Bubble = () => (
 7 |         <motion.div
 8 |             key={'typing-bubble'}
 9 |             exit={{ opacity: 0, scale: 0, x: '-50%' }}
10 |             initial={{ opacity: 0, scale: 0, x: '-50%' }}
11 |             animate={{ opacity: 1, scale: 1, x: '-50%' }}
12 |             className="absolute bg-background top-4 z-40 w-fit -translate-x-1/2 left-1/2 pointer-events-none"
13 |         >
14 |             <div
15 |                 className={cn(
16 |                     'border rounded-md px-2.5 py-[3px] text-xs  ',
17 |                     'bg-gradient-to-b border-green-600 text-green-500 from-green-500/20 to-green-500/30'
18 |                 )}
19 |             >
20 |                 <p>{typingUsers.map(u => u.name).join(', ')} is typing...</p>
21 |             </div>
22 |         </motion.div>
23 |     );
24 | 
25 |     return <AnimatePresence key={'typing'}>{typingUsers.length > 0 && Bubble()}</AnimatePresence>;
26 | };
27 | 
28 | export default TypingBubble;
29 | 


--------------------------------------------------------------------------------
/src/components/ui/switch.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as SwitchPrimitives from "@radix-ui/react-switch"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const Switch = React.forwardRef<
 7 |   React.ElementRef<typeof SwitchPrimitives.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
 9 | >(({ className, ...props }, ref) => (
10 |   <SwitchPrimitives.Root
11 |     className={cn(
12 |       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
13 |       className
14 |     )}
15 |     {...props}
16 |     ref={ref}
17 |   >
18 |     <SwitchPrimitives.Thumb
19 |       className={cn(
20 |         "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
21 |       )}
22 |     />
23 |   </SwitchPrimitives.Root>
24 | ))
25 | Switch.displayName = SwitchPrimitives.Root.displayName
26 | 
27 | export { Switch }
28 | 


--------------------------------------------------------------------------------
/src/App.tsx:
--------------------------------------------------------------------------------
 1 | import AOS from 'aos';
 2 | import 'aos/dist/aos.css';
 3 | 
 4 | import Loader from '@/components/loader';
 5 | import { useAuthContext } from './context/auth-context';
 6 | import { lazy, Suspense, useEffect, useState } from 'react';
 7 | 
 8 | const Chat = lazy(() => import('./pages/chat'));
 9 | const Home = lazy(() => import('./pages/home'));
10 | 
11 | function App() {
12 |     const { user, isLoading, isInitializing } = useAuthContext();
13 |     const [isInitialized, setIsInitialized] = useState(false);
14 | 
15 |     useEffect(() => {
16 |         const initializeApp = async () => {
17 |             try {
18 |                 const { init } = await import('emoji-mart');
19 |                 const emojiData = await import('@emoji-mart/data');
20 | 
21 |                 init({ data: emojiData.default });
22 |                 AOS.init({ offset: 50 });
23 |                 AOS.refresh();
24 | 
25 |                 setIsInitialized(true);
26 |             } catch (error) {
27 |                 console.error('Failed to initialize app:', error);
28 |             }
29 |         };
30 | 
31 |         initializeApp();
32 |     }, []);
33 | 
34 |     if (!isInitialized || (isLoading && !isInitializing)) return <Loader />;
35 |     return <Suspense fallback={<Loader />}>{user ? <Chat /> : <Home />}</Suspense>;
36 | }
37 | 
38 | export default App;
39 | 


--------------------------------------------------------------------------------
/firebase.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "rules": {
 3 |     "userStatus": {
 4 |       ".indexOn": ["isOnline", "updatedAt"],
 5 |       ".read": "(query.orderByChild == 'updatedAt' && query.limitToLast <= 1000) ||
 6 |                 (query.orderByChild == 'isOnline' && query.equalTo == true)",
 7 |       "$userId": {
 8 |         ".read": "true",
 9 |         ".write": "true",
10 |         ".validate": "newData.hasChildren(['name', 'isOnline', 'updatedAt']) &&
11 |                    newData.child('name').isString() && 
12 |                    newData.child('name').val().length >= 2 && 
13 |                    newData.child('name').val().length <= 50 &&
14 |                    newData.child('isOnline').isBoolean() &&
15 |                    newData.child('updatedAt').val() === now"
16 |       }
17 |     },
18 |     "typingStatus": {
19 |       ".read": "true",
20 |       ".indexOn": ["isTyping"],
21 |       "$userId": {
22 |         ".write": "true",
23 |         ".validate": "newData.hasChildren(['name', 'isTyping', 'updatedAt']) &&
24 |                    newData.child('name').isString() && 
25 |                    newData.child('name').val().length >= 2 && 
26 |                    newData.child('name').val().length <= 50 &&
27 |                    newData.child('isTyping').isBoolean() &&
28 |                    newData.child('updatedAt').val() === now"
29 |       }
30 |     }
31 |   }
32 | }


--------------------------------------------------------------------------------
/src/hooks/useTyping.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react';
 2 | import { onValue, query, ref, orderByChild, equalTo } from 'firebase/database';
 3 | import { rtdb } from '../lib/firebase';
 4 | import { TypingStatus } from '@/types';
 5 | import { soundManager } from '@/lib/sound';
 6 | import { useSettingsContext } from '@/context/settings-context';
 7 | 
 8 | const useTyping = () => {
 9 |     const { settings } = useSettingsContext();
10 |     const [typingUsers, setTypingUsers] = useState<TypingStatus[]>([]);
11 | 
12 |     useEffect(() => {
13 |         if (typingUsers.length > 0 && settings.soundEnabled) soundManager.play('typing');
14 |     }, [typingUsers.length]);
15 | 
16 |     useEffect(() => {
17 |         const typingQuery = query(ref(rtdb, 'typingStatus'), orderByChild('isTyping'), equalTo(true));
18 | 
19 |         const unsubscribe = onValue(typingQuery, snapshot => {
20 |             const typingData: TypingStatus[] = [];
21 | 
22 |             snapshot.forEach(childSnapshot => {
23 |                 const data = childSnapshot.val();
24 |                 typingData.push({ id: childSnapshot.key, ...data });
25 |             });
26 | 
27 |             setTypingUsers(typingData);
28 |         });
29 | 
30 |         return () => unsubscribe();
31 |     }, []);
32 | 
33 |     return { typingUsers };
34 | };
35 | 
36 | export default useTyping;
37 | 


--------------------------------------------------------------------------------
/tsconfig.app.tsbuildinfo:
--------------------------------------------------------------------------------
1 | {"root":["./src/App.tsx","./src/main.tsx","./src/vite-env.d.ts","./src/components/chat-area.tsx","./src/components/chat-header.tsx","./src/components/load-more-btn.tsx","./src/components/loader.tsx","./src/components/logout-dialog.tsx","./src/components/message-input.tsx","./src/components/profile-avatar.tsx","./src/components/settings-dialog.tsx","./src/components/typing-bubble.tsx","./src/components/users-list.tsx","./src/components/ui/alert-dialog.tsx","./src/components/ui/animated-grid-pattern.tsx","./src/components/ui/animated-shiny-text.tsx","./src/components/ui/avatar.tsx","./src/components/ui/button.tsx","./src/components/ui/card.tsx","./src/components/ui/context-menu.tsx","./src/components/ui/dialog.tsx","./src/components/ui/dropdown-menu.tsx","./src/components/ui/input.tsx","./src/components/ui/label.tsx","./src/components/ui/message-bubble.tsx","./src/components/ui/rainbow-button.tsx","./src/components/ui/scroll-area.tsx","./src/components/ui/scroll-progress.tsx","./src/components/ui/shine-border.tsx","./src/components/ui/switch.tsx","./src/components/ui/textarea.tsx","./src/context/auth-context.tsx","./src/context/settings-context.tsx","./src/data/country-data.ts","./src/hooks/useAuth.ts","./src/hooks/useChat.ts","./src/hooks/useOnlineCount.ts","./src/hooks/useOnlineUsers.ts","./src/hooks/useSettings.ts","./src/hooks/useTyping.ts","./src/lib/chat.ts","./src/lib/firebase.ts","./src/lib/sound.ts","./src/lib/utils.ts","./src/pages/chat.tsx","./src/pages/home.tsx","./src/types/index.d.ts"],"version":"5.6.3"}


--------------------------------------------------------------------------------
/.rules:
--------------------------------------------------------------------------------
 1 | rules_version = '2';
 2 | 
 3 | service cloud.firestore {
 4 |     match /databases/{database}/documents {
 5 | 
 6 |         function isValidString(field, minSize, maxSize) {
 7 |             return field is string && field.size() >= minSize && field.size() <= maxSize;
 8 |         }
 9 | 
10 |         function hasRequiredFields(resourceData, fields) {
11 |             return resourceData.keys().hasAll(fields);
12 |         }
13 | 
14 |         match /users/{userId} {
15 |             allow read;
16 | 
17 |             allow create: if hasRequiredFields(request.resource.data, ['id', 'name', 'userAgent', 'country', 'createdAt'])
18 |                 && request.resource.data.id == userId
19 |                 && isValidString(request.resource.data.name, 2, 50)
20 |                 && isValidString(request.resource.data.userAgent, 1, 500)
21 |                 && isValidString(request.resource.data.country, 2, 20)
22 |                 && request.resource.data.createdAt == request.time;
23 |         }
24 | 
25 |         match /messages/{messageId} {
26 |             allow read;
27 | 
28 |             allow create: if hasRequiredFields(request.resource.data, ['content', 'userId', 'userName', 'userCountry', 'timestamp'])
29 |                 && isValidString(request.resource.data.content, 1, 255)
30 |                 && isValidString(request.resource.data.userId, 1, 500) 
31 |                 && isValidString(request.resource.data.userName, 2, 50)
32 |                 && isValidString(request.resource.data.userCountry, 2, 20)
33 |                 && request.resource.data.timestamp == request.time;
34 |         }
35 |     }
36 | }
37 | 


--------------------------------------------------------------------------------
/src/components/ui/avatar.tsx:
--------------------------------------------------------------------------------
 1 | "use client"
 2 | 
 3 | import * as React from "react"
 4 | import * as AvatarPrimitive from "@radix-ui/react-avatar"
 5 | 
 6 | import { cn } from "@/lib/utils"
 7 | 
 8 | const Avatar = React.forwardRef<
 9 |   React.ElementRef<typeof AvatarPrimitive.Root>,
10 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
11 | >(({ className, ...props }, ref) => (
12 |   <AvatarPrimitive.Root
13 |     ref={ref}
14 |     className={cn(
15 |       "relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full",
16 |       className
17 |     )}
18 |     {...props}
19 |   />
20 | ))
21 | Avatar.displayName = AvatarPrimitive.Root.displayName
22 | 
23 | const AvatarImage = React.forwardRef<
24 |   React.ElementRef<typeof AvatarPrimitive.Image>,
25 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
26 | >(({ className, ...props }, ref) => (
27 |   <AvatarPrimitive.Image
28 |     ref={ref}
29 |     className={cn("aspect-square h-full w-full", className)}
30 |     {...props}
31 |   />
32 | ))
33 | AvatarImage.displayName = AvatarPrimitive.Image.displayName
34 | 
35 | const AvatarFallback = React.forwardRef<
36 |   React.ElementRef<typeof AvatarPrimitive.Fallback>,
37 |   React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
38 | >(({ className, ...props }, ref) => (
39 |   <AvatarPrimitive.Fallback
40 |     ref={ref}
41 |     className={cn(
42 |       "flex h-full w-full items-center justify-center rounded-full bg-muted",
43 |       className
44 |     )}
45 |     {...props}
46 |   />
47 | ))
48 | AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName
49 | 
50 | export { Avatar, AvatarImage, AvatarFallback }
51 | 


--------------------------------------------------------------------------------
/src/hooks/useSettings.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react';
 2 | import { Settings } from '../types';
 3 | 
 4 | const DEFAULT_SETTINGS: Settings = {
 5 |     autoScroll: true,
 6 |     soundEnabled: true,
 7 |     scrollIndicator: false,
 8 |     profanityFilter: true,
 9 | };
10 | 
11 | const useSettings = () => {
12 |     const [settings, setSettings] = useState<Settings>(DEFAULT_SETTINGS);
13 | 
14 |     useEffect(() => {
15 |         const loadSettings = () => {
16 |             try {
17 |                 const savedSettings = localStorage.getItem('appSettings');
18 |                 if (savedSettings) setSettings(JSON.parse(savedSettings));
19 |             } catch (error) {
20 |                 console.error('Error loading settings:', error);
21 |                 setSettings(DEFAULT_SETTINGS);
22 |             }
23 |         };
24 | 
25 |         loadSettings();
26 |     }, []);
27 | 
28 |     const updateSetting = <K extends keyof Settings>(key: K, value: Settings[K]) => {
29 |         const newSettings = { ...settings, [key]: value };
30 |         setSettings(newSettings);
31 | 
32 |         try {
33 |             localStorage.setItem('appSettings', JSON.stringify(newSettings));
34 |         } catch (error) {
35 |             console.error('Error saving settings:', error);
36 |         }
37 |     };
38 | 
39 |     const resetSettings = () => {
40 |         setSettings(DEFAULT_SETTINGS);
41 |         try {
42 |             localStorage.setItem('appSettings', JSON.stringify(DEFAULT_SETTINGS));
43 |         } catch (error) {
44 |             console.error('Error resetting settings:', error);
45 |         }
46 |     };
47 | 
48 |     return {
49 |         settings,
50 |         updateSetting,
51 |         resetSettings,
52 |     };
53 | };
54 | 
55 | export default useSettings;
56 | 


--------------------------------------------------------------------------------
/src/components/logout-dialog.tsx:
--------------------------------------------------------------------------------
 1 | import { AlertDialogProps } from '@radix-ui/react-alert-dialog';
 2 | import {
 3 |     AlertDialog,
 4 |     AlertDialogContent,
 5 |     AlertDialogDescription,
 6 |     AlertDialogFooter,
 7 |     AlertDialogHeader,
 8 |     AlertDialogTitle,
 9 | } from './ui/alert-dialog';
10 | import { Button } from './ui/button';
11 | import { LogOut } from 'lucide-react';
12 | import { useAuthContext } from '../context/auth-context';
13 | 
14 | interface Props extends AlertDialogProps {}
15 | 
16 | const LogoutDialog = ({ open, onOpenChange }: Props) => {
17 |     const { logout } = useAuthContext();
18 | 
19 |     return (
20 |         <AlertDialog open={open} onOpenChange={onOpenChange}>
21 |             <AlertDialogContent>
22 |                 <AlertDialogHeader>
23 |                     <AlertDialogTitle>Logout?</AlertDialogTitle>
24 |                     <AlertDialogDescription>
25 |                         Are you sure you want to logout? If you logout, you can login again by entering your name from
26 |                         the same browser.
27 |                     </AlertDialogDescription>
28 |                 </AlertDialogHeader>
29 |                 <AlertDialogFooter className="gap-2">
30 |                     {/* @ts-ignore */}
31 |                     <Button variant={'secondary'} onClick={() => onOpenChange(false)}>
32 |                         Cancel
33 |                     </Button>
34 |                     {/* @ts-ignore */}
35 |                     <Button variant={'destructive'} onClick={logout}>
36 |                         Logout <LogOut className="size-4" />{' '}
37 |                     </Button>
38 |                 </AlertDialogFooter>
39 |             </AlertDialogContent>
40 |         </AlertDialog>
41 |     );
42 | };
43 | 
44 | export default LogoutDialog;
45 | 


--------------------------------------------------------------------------------
/src/components/ui/scroll-area.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area"
 3 | 
 4 | import { cn } from "@/lib/utils"
 5 | 
 6 | const ScrollArea = React.forwardRef<
 7 |   React.ElementRef<typeof ScrollAreaPrimitive.Root>,
 8 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root>
 9 | >(({ className, children, ...props }, ref) => (
10 |   <ScrollAreaPrimitive.Root
11 |     
12 |     className={cn("relative overflow-hidden", className)}
13 |     {...props}
14 |   >
15 |     <ScrollAreaPrimitive.Viewport ref={ref} className="h-full w-full rounded-[inherit]">
16 |       {children}
17 |     </ScrollAreaPrimitive.Viewport>
18 |     <ScrollBar />
19 |     <ScrollAreaPrimitive.Corner />
20 |   </ScrollAreaPrimitive.Root>
21 | ))
22 | ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName
23 | 
24 | const ScrollBar = React.forwardRef<
25 |   React.ElementRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>,
26 |   React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.ScrollAreaScrollbar>
27 | >(({ className, orientation = "vertical", ...props }, ref) => (
28 |   <ScrollAreaPrimitive.ScrollAreaScrollbar
29 |     ref={ref}
30 |     orientation={orientation}
31 |     className={cn(
32 |       "flex touch-none select-none transition-colors",
33 |       orientation === "vertical" &&
34 |         "h-full w-2.5 border-l border-l-transparent p-[1px]",
35 |       orientation === "horizontal" &&
36 |         "h-2.5 flex-col border-t border-t-transparent p-[1px]",
37 |       className
38 |     )}
39 |     {...props}
40 |   >
41 |     <ScrollAreaPrimitive.ScrollAreaThumb className="relative flex-1 rounded-full bg-border" />
42 |   </ScrollAreaPrimitive.ScrollAreaScrollbar>
43 | ))
44 | ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName
45 | 
46 | export { ScrollArea, ScrollBar }
47 | 


--------------------------------------------------------------------------------
/src/components/ui/rainbow-button.tsx:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | 
 3 | import { cn } from "@/lib/utils";
 4 | interface RainbowButtonProps
 5 |   extends React.ButtonHTMLAttributes<HTMLButtonElement> {}
 6 | 
 7 | export function RainbowButton({
 8 |   children,
 9 |   className,
10 |   ...props
11 | }: RainbowButtonProps) {
12 |   return (
13 |     <button
14 |       className={cn(
15 |         "group relative inline-flex h-11 animate-rainbow cursor-pointer items-center justify-center rounded-xl border-0 bg-[length:200%] px-8 py-2 font-medium text-primary-foreground transition-colors [background-clip:padding-box,border-box,border-box] [background-origin:border-box] [border:calc(0.08*1rem)_solid_transparent] focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
16 | 
17 |         // before styles
18 |         "before:absolute before:bottom-[-20%] before:left-1/2 before:z-0 before:h-1/5 before:w-3/5 before:-translate-x-1/2 before:animate-rainbow before:bg-[linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))] before:[filter:blur(calc(0.8*1rem))]",
19 | 
20 |         // light mode colors
21 |         "bg-[linear-gradient(#121213,#121213),linear-gradient(#121213_50%,rgba(18,18,19,0.6)_80%,rgba(18,18,19,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
22 | 
23 |         // dark mode colors
24 |         "dark:bg-[linear-gradient(#fff,#fff),linear-gradient(#fff_50%,rgba(255,255,255,0.6)_80%,rgba(0,0,0,0)),linear-gradient(90deg,hsl(var(--color-1)),hsl(var(--color-5)),hsl(var(--color-3)),hsl(var(--color-4)),hsl(var(--color-2)))]",
25 | 
26 |         className,
27 |       )}
28 |       {...props}
29 |     >
30 |       {children}
31 |     </button>
32 |   );
33 | }
34 | 


--------------------------------------------------------------------------------
/src/components/ui/button.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | import { Slot } from "@radix-ui/react-slot"
 3 | import { cva, type VariantProps } from "class-variance-authority"
 4 | 
 5 | import { cn } from "@/lib/utils"
 6 | 
 7 | const buttonVariants = cva(
 8 |   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 9 |   {
10 |     variants: {
11 |       variant: {
12 |         default:
13 |           "bg-primary text-primary-foreground shadow hover:bg-primary/90",
14 |         destructive:
15 |           "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
16 |         outline:
17 |           "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
18 |         secondary:
19 |           "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
20 |         ghost: "hover:bg-accent hover:text-accent-foreground",
21 |         link: "text-primary underline-offset-4 hover:underline",
22 |       },
23 |       size: {
24 |         default: "h-9 px-4 py-2",
25 |         sm: "h-8 rounded-md px-3 text-xs",
26 |         lg: "h-10 rounded-md px-8",
27 |         icon: "h-9 w-9",
28 |       },
29 |     },
30 |     defaultVariants: {
31 |       variant: "default",
32 |       size: "default",
33 |     },
34 |   }
35 | )
36 | 
37 | export interface ButtonProps
38 |   extends React.ButtonHTMLAttributes<HTMLButtonElement>,
39 |     VariantProps<typeof buttonVariants> {
40 |   asChild?: boolean
41 | }
42 | 
43 | const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
44 |   ({ className, variant, size, asChild = false, ...props }, ref) => {
45 |     const Comp = asChild ? Slot : "button"
46 |     return (
47 |       <Comp
48 |         className={cn(buttonVariants({ variant, size, className }))}
49 |         ref={ref}
50 |         {...props}
51 |       />
52 |     )
53 |   }
54 | )
55 | Button.displayName = "Button"
56 | 
57 | export { Button, buttonVariants }
58 | 


--------------------------------------------------------------------------------
/src/components/ui/card.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from "react"
 2 | 
 3 | import { cn } from "@/lib/utils"
 4 | 
 5 | const Card = React.forwardRef<
 6 |   HTMLDivElement,
 7 |   React.HTMLAttributes<HTMLDivElement>
 8 | >(({ className, ...props }, ref) => (
 9 |   <div
10 |     ref={ref}
11 |     className={cn(
12 |       "rounded-xl border bg-card text-card-foreground shadow",
13 |       className
14 |     )}
15 |     {...props}
16 |   />
17 | ))
18 | Card.displayName = "Card"
19 | 
20 | const CardHeader = React.forwardRef<
21 |   HTMLDivElement,
22 |   React.HTMLAttributes<HTMLDivElement>
23 | >(({ className, ...props }, ref) => (
24 |   <div
25 |     ref={ref}
26 |     className={cn("flex flex-col space-y-1.5 p-6", className)}
27 |     {...props}
28 |   />
29 | ))
30 | CardHeader.displayName = "CardHeader"
31 | 
32 | const CardTitle = React.forwardRef<
33 |   HTMLDivElement,
34 |   React.HTMLAttributes<HTMLDivElement>
35 | >(({ className, ...props }, ref) => (
36 |   <div
37 |     ref={ref}
38 |     className={cn("font-semibold leading-none tracking-tight", className)}
39 |     {...props}
40 |   />
41 | ))
42 | CardTitle.displayName = "CardTitle"
43 | 
44 | const CardDescription = React.forwardRef<
45 |   HTMLDivElement,
46 |   React.HTMLAttributes<HTMLDivElement>
47 | >(({ className, ...props }, ref) => (
48 |   <div
49 |     ref={ref}
50 |     className={cn("text-sm text-muted-foreground", className)}
51 |     {...props}
52 |   />
53 | ))
54 | CardDescription.displayName = "CardDescription"
55 | 
56 | const CardContent = React.forwardRef<
57 |   HTMLDivElement,
58 |   React.HTMLAttributes<HTMLDivElement>
59 | >(({ className, ...props }, ref) => (
60 |   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
61 | ))
62 | CardContent.displayName = "CardContent"
63 | 
64 | const CardFooter = React.forwardRef<
65 |   HTMLDivElement,
66 |   React.HTMLAttributes<HTMLDivElement>
67 | >(({ className, ...props }, ref) => (
68 |   <div
69 |     ref={ref}
70 |     className={cn("flex items-center p-6 pt-0", className)}
71 |     {...props}
72 |   />
73 | ))
74 | CardFooter.displayName = "CardFooter"
75 | 
76 | export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
77 | 


--------------------------------------------------------------------------------
/src/components/users-list.tsx:
--------------------------------------------------------------------------------
 1 | import { formatDistanceToNow } from 'date-fns';
 2 | import useOnlineUsers from '../hooks/useOnlineUsers';
 3 | import { cn } from '../lib/utils';
 4 | import { ScrollArea } from './ui/scroll-area';
 5 | 
 6 | type Props = {
 7 |     showUsers: boolean;
 8 | };
 9 | 
10 | const UsersList = ({ showUsers }: Props) => {
11 |     const { users } = useOnlineUsers({});
12 | 
13 |     return (
14 |         <div
15 |             className={cn(
16 |                 'w-full border-r h-full overflow-hidden flex bg-card z-20 transition-all duration-500',
17 |                 'absolute md:relative top-0 max-md:-left-full',
18 |                 showUsers && 'max-md:left-0'
19 |             )}
20 |         >
21 |             <ScrollArea className="w-full">
22 |                 <h2 className="md:hidden mt-16 text-center text-lg font-semibold text-muted-foreground px-4">Online Users</h2>
23 | 
24 |                 <div className="space-y-3 px-4 py-6">
25 |                     {[...users].map(user => (
26 |                         <div
27 |                             key={user.id}
28 |                             className={
29 |                                 'rounded-md border bg-muted/40 border-muted-foreground/15  px-3 py-1.5 grid grid-cols-[1fr_1rem] items-center'
30 |                             }
31 |                         >
32 |                             <div>
33 |                                 <h4 className="capitalize w-full">{user.name}</h4>
34 |                                 <p className="text-xs mt-0.5 text-muted-foreground">
35 |                                     <b>Last Seen: </b>
36 |                                     {user.isOnline ? 'Online' : formatDistanceToNow(user.updatedAt, { addSuffix: true })}
37 |                                 </p>
38 |                             </div>
39 |                             <div>
40 |                                 <p className={cn('size-2.5 mx-auto rounded-full ', user.isOnline ? 'bg-green-500' : 'bg-red-500')}></p>
41 |                             </div>
42 |                         </div>
43 |                     ))}
44 |                 </div>
45 |             </ScrollArea>
46 |         </div>
47 |     );
48 | };
49 | 
50 | export default UsersList;
51 | 


--------------------------------------------------------------------------------
/src/components/loader.tsx:
--------------------------------------------------------------------------------
 1 | const Loader = () => {
 2 |     return (
 3 |         <div className="h-[92vh] w-screen flex flex-col  items-center justify-center gap-4 relative">
 4 |             <svg className="pl" viewBox="0 0 200 200" width="200" height="200" xmlns="http://www.w3.org/2000/svg">
 5 |                 <defs>
 6 |                     <linearGradient id="pl-grad1" x1="1" y1="0.5" x2="0" y2="0.5">
 7 |                         <stop offset="0%" stopColor="hsl(313,90%,55%)" />
 8 |                         <stop offset="100%" stopColor="hsl(223,90%,55%)" />
 9 |                         {/* <stop offset="0%" stopColor="#f43f5e" />
10 |                         <stop offset="50%" stopColor="#a855f7" />
11 |                         <stop offset="100%" stopColor="#3b82f6" /> */}
12 |                     </linearGradient>
13 |                     <linearGradient id="pl-grad2" x1="0" y1="0" x2="0" y2="1">
14 |                         <stop offset="0%" stopColor="hsl(313,90%,55%)" />
15 |                         <stop offset="100%" stopColor="hsl(223,90%,55%)" />
16 |                     </linearGradient>
17 |                 </defs>
18 |                 <circle
19 |                     className="pl__ring"
20 |                     cx="100"
21 |                     cy="100"
22 |                     r="82"
23 |                     fill="none"
24 |                     stroke="url(#pl-grad1)"
25 |                     strokeWidth="30"
26 |                     strokeDasharray="0 257 1 257"
27 |                     strokeDashoffset="0.01"
28 |                     strokeLinecap="round"
29 |                     transform="rotate(-90,100,100)"
30 |                 />
31 |                 <line
32 |                     className="pl__ball"
33 |                     stroke="url(#pl-grad2)"
34 |                     x1="100"
35 |                     y1="18"
36 |                     x2="100.01"
37 |                     y2="182"
38 |                     strokeWidth="30"
39 |                     strokeDasharray="1 165"
40 |                     strokeLinecap="round"
41 |                 />
42 |             </svg>
43 | 
44 |             {/* <p className="text-gradient text-3xl md:text-4xl font-bold tracking-wider uppercase">Loading</p> */}
45 |             <p className="text-gradient text-lg md:text-2xl font-bold tracking-wider uppercase ">Loading</p>
46 |         </div>
47 |     );
48 | };
49 | 
50 | export default Loader;
51 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "chat-world",
 3 |   "description": "ChatWorld is a lightweight, real-time global chat application that lets you instantly connect with people around the world. No sign-up required - just enter your name and start chatting!",
 4 |   "private": false,
 5 |   "version": "0.0.0",
 6 |   "type": "module",
 7 |   "scripts": {
 8 |     "dev": "vite",
 9 |     "build": "tsc -b && vite build",
10 |     "lint": "eslint .",
11 |     "preview": "vite preview"
12 |   },
13 |   "dependencies": {
14 |     "@emoji-mart/data": "^1.2.1",
15 |     "@radix-ui/react-alert-dialog": "^1.1.4",
16 |     "@radix-ui/react-avatar": "^1.1.2",
17 |     "@radix-ui/react-context-menu": "^2.2.4",
18 |     "@radix-ui/react-dialog": "^1.1.4",
19 |     "@radix-ui/react-dropdown-menu": "^2.1.4",
20 |     "@radix-ui/react-label": "^2.1.1",
21 |     "@radix-ui/react-scroll-area": "^1.2.2",
22 |     "@radix-ui/react-slot": "^1.1.1",
23 |     "@radix-ui/react-switch": "^1.1.2",
24 |     "@vercel/analytics": "^1.4.1",
25 |     "@vercel/speed-insights": "^1.1.0",
26 |     "aos": "^2.3.4",
27 |     "axios": "^1.7.9",
28 |     "bad-words": "^4.0.0",
29 |     "class-variance-authority": "^0.7.1",
30 |     "clsx": "^2.1.1",
31 |     "date-fns": "^4.1.0",
32 |     "emoji-mart": "^5.6.0",
33 |     "emoji-regex": "^10.4.0",
34 |     "firebase": "^11.1.0",
35 |     "js-cookie": "^3.0.5",
36 |     "linkify-react": "^4.2.0",
37 |     "linkifyjs": "^4.2.0",
38 |     "lodash": "^4.17.21",
39 |     "lucide-react": "^0.469.0",
40 |     "motion": "^11.15.0",
41 |     "react": "^18.3.1",
42 |     "react-dom": "^18.3.1",
43 |     "react-ga4": "^2.1.0",
44 |     "react-hot-toast": "^2.5.1",
45 |     "react-use": "^17.6.0",
46 |     "tailwind-merge": "^2.6.0",
47 |     "tailwindcss-animate": "^1.0.7"
48 |   },
49 |   "devDependencies": {
50 |     "@eslint/js": "^9.17.0",
51 |     "@types/aos": "^3.0.7",
52 |     "@types/js-cookie": "^3.0.6",
53 |     "@types/lodash": "^4.17.13",
54 |     "@types/node": "^22.10.3",
55 |     "@types/react": "^18.3.18",
56 |     "@types/react-dom": "^18.3.5",
57 |     "@vitejs/plugin-react": "^4.3.4",
58 |     "autoprefixer": "^10.4.20",
59 |     "eslint": "^9.17.0",
60 |     "eslint-plugin-react-hooks": "^5.0.0",
61 |     "eslint-plugin-react-refresh": "^0.4.16",
62 |     "globals": "^15.14.0",
63 |     "postcss": "^8.4.49",
64 |     "tailwindcss": "^3.4.17",
65 |     "typescript": "~5.6.2",
66 |     "typescript-eslint": "^8.18.2",
67 |     "vite": "^6.0.5"
68 |   }
69 | }
70 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!doctype html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="UTF-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 7 | 
 8 |   <title>Chat World - Connect Globally, Chat Simply</title>
 9 |   <meta name="description"
10 |     content="Chat World is a simple, intuitive app that connects people across the globe. Enjoy seamless and secure chatting with anyone, anywhere.">
11 |   <meta name="keywords"
12 |     content="Chat World, world chat app, global chat, messaging app, simple chat app, secure chat, connect globally, instant messaging">
13 |   <meta name="author" content="Your Name or Company Name">
14 |   <meta charset="UTF-8">
15 | 
16 |   <meta property="og:title" content="Chat World - Connect Globally, Chat Simply">
17 |   <meta property="og:description"
18 |     content="Chat World lets you connect with friends and people worldwide. Start chatting instantly and securely.">
19 |   <meta property="og:image" content="https://chatworld.vercel.app/banner.png">
20 |   <meta property="og:url" content="https://chatworld.vercel.app">
21 |   <meta property="og:type" content="website">
22 | 
23 |   <meta name="twitter:card" content="https://chatworld.vercel.app/banner.png">
24 |   <meta name="twitter:title" content="Chat World - Connect Globally, Chat Simply">
25 |   <meta name="twitter:description" content="Join Chat World to experience simple and secure global chatting.">
26 |   <meta name="twitter:image" content="https://chatworld.vercel.app/banner.png">
27 | 
28 |   <link rel="icon" href="/favicon.ico" />
29 |   <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
30 |   <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
31 |   <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
32 |   <link rel="manifest" href="/site.webmanifest">
33 | 
34 |   <meta name="theme-color" content="#000000">
35 |   <meta name="robots" content="index, follow">
36 |   <meta name="google-site-verification" content="koBxrTJwnDsFGPdjUesKqkWAgmhsZyvWWlDkwv4cOpw" />
37 | 
38 |   <link rel="preconnect" href="https://fonts.googleapis.com">
39 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
40 |   <link
41 |     href="https://fonts.googleapis.com/css2?family=Electrolize&family=Lexend:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap"
42 |     rel="stylesheet">
43 | </head>
44 | 
45 | <body class="dark">
46 |   <div id="root"></div>
47 |   <script type="module" src="/src/main.tsx">
48 | 
49 |   </script>
50 | </body>
51 | 
52 | </html>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | ## ChatWorld 🌐💬
 2 | 
 3 | ChatWorld is a lightweight, real-time global chat application that lets you instantly connect with people around the world. No sign-up required - just enter your name and start chatting!
 4 | 
 5 | <!-- ![ChatWorld Interface](/public/banner.png) -->
 6 | 
 7 | ### 🔴 Live Demo
 8 | 
 9 | Experience Chat World live at [https://chatworld.vercel.app](https://chatworld.vercel.app)
10 | 
11 | ### ✨ Features
12 | 
13 | - **Instant Access**: No sign-up or authentication required
14 | - **Real-time Messaging**: Powered by Firebase Realtime Database
15 | - **Message Persistence**: Never lose conversation history
16 | - **User Status**: See who's online in real-time
17 | - **Typing Indicators**: Know when others are composing messages
18 | - **Emoji Support**: Express yourself with a wide range of emojis 🎉
19 | - **Responsive Design**: Works seamlessly on both desktop and mobile devices
20 | 
21 | ### 🛠️ Built With
22 | 
23 | - [React](https://reactjs.org/)
24 | - [Vite](https://vitejs.dev/)
25 | - [TypeScript](https://www.typescriptlang.org/)
26 | - [Tailwind CSS](https://tailwindcss.com/)
27 | - [Firebase](https://firebase.google.com/)
28 | 
29 | ## 🚀 Getting Started
30 | 
31 | ### Prerequisites
32 | 
33 | - Node.js (version 14 or higher)
34 | - npm or yarn
35 | - Firebase project
36 | 
37 | ### Installation
38 | 
39 | 1. Clone the repository
40 | ```bash
41 | git clone https://github.com/devxprite/chat-world.git
42 | cd chatworld
43 | ```
44 | 
45 | 2. Install dependencies
46 | ```bash
47 | npm install
48 | # or
49 | yarn install
50 | ```
51 | 
52 | 3. Configure environment variables
53 |    - Rename `.env.example` to `.env`
54 |    - Fill in your Firebase configuration details
55 | 
56 | 
57 | 4. Start the development server
58 | ```bash
59 | npm run dev
60 | # or
61 | yarn dev
62 | ```
63 | 
64 | ## 📝 License
65 | 
66 | This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
67 | 
68 | ## 🤝 Contributing
69 | 
70 | Contributions, issues, and feature requests are welcome! Feel free to check the [issues page](https://github.com/devxprite/chat-world/issues).
71 | 
72 | 1. Fork the project
73 | 2. Create your feature branch (`git checkout -b feature/AmazingFeature`)
74 | 3. Commit your changes (`git commit -m 'Add some AmazingFeature'`)
75 | 4. Push to the branch (`git push origin feature/AmazingFeature`)
76 | 5. Open a Pull Request
77 | 
78 | ## 👨‍💻 Author
79 | 
80 | Prateek Singh
81 | - GitHub: [@devxprite](https://github.com/devxprite)
82 | 
83 | ## 💫 Show your support
84 | 
85 | Give a ⭐️ if you like this project!


--------------------------------------------------------------------------------
/src/components/ui/shine-border.tsx:
--------------------------------------------------------------------------------
 1 | 'use client';
 2 | 
 3 | import { cn } from '@/lib/utils';
 4 | 
 5 | type TColorProp = string | string[];
 6 | 
 7 | interface ShineBorderProps {
 8 |     borderRadius?: number;
 9 |     borderWidth?: number;
10 |     duration?: number;
11 |     color?: TColorProp;
12 |     className?: string;
13 |     children: React.ReactNode;
14 | }
15 | 
16 | /**
17 |  * @name Shine Border
18 |  * @description It is an animated background border effect component with easy to use and configurable props.
19 |  * @param borderRadius defines the radius of the border.
20 |  * @param borderWidth defines the width of the border.
21 |  * @param duration defines the animation duration to be applied on the shining border
22 |  * @param color a string or string array to define border color.
23 |  * @param className defines the class name to be applied to the component
24 |  * @param children contains react node elements.
25 |  */
26 | export default function ShineBorder({
27 |     borderRadius = 8,
28 |     borderWidth = 1,
29 |     duration = 14,
30 |     color = '#000000',
31 |     className,
32 |     children,
33 | }: ShineBorderProps) {
34 |     return (
35 |         <div
36 |             style={
37 |                 {
38 |                     '--border-radius': `${borderRadius}px`,
39 |                 } as React.CSSProperties
40 |             }
41 |             className={cn(
42 |                 'relative min-h-[60px] w-fit min-w-[300px] place-items-center rounded-[--border-radius] bg-white p-3 text-black dark:bg-muted/40 dark:text-white',
43 |                 className
44 |             )}
45 |             
46 |         >
47 |             <div
48 |                 style={
49 |                     {
50 |                         '--border-width': `${borderWidth}px`,
51 |                         '--border-radius': `${borderRadius}px`,
52 |                         '--duration': `${duration}s`,
53 |                         '--mask-linear-gradient': `linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)`,
54 |                         '--background-radial-gradient': `radial-gradient(transparent,transparent, ${
55 |                             color instanceof Array ? color.join(',') : color
56 |                         },transparent,transparent)`,
57 |                     } as React.CSSProperties
58 |                 }
59 |                 className={`pointer-events-none before:bg-shine-size before:absolute before:inset-0 before:size-full before:rounded-[--border-radius] before:p-[--border-width] before:will-change-[background-position] before:content-[""] before:![-webkit-mask-composite:xor] before:![mask-composite:exclude] before:[background-image:--background-radial-gradient] before:[background-size:300%_300%] before:[mask:--mask-linear-gradient] motion-safe:before:animate-shine`}
60 |             ></div>
61 |             {children}
62 |         </div>
63 |     );
64 | }
65 | 


--------------------------------------------------------------------------------
/tailwind.config.ts:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | export default {
 3 |     darkMode: ["class"],
 4 |     content: [
 5 |     "./index.html",
 6 |     "./src/**/*.{js,ts,jsx,tsx}",
 7 |   ],
 8 |   theme: {
 9 |   	extend: {
10 |   		borderRadius: {
11 |   			lg: 'var(--radius)',
12 |   			md: 'calc(var(--radius) - 2px)',
13 |   			sm: 'calc(var(--radius) - 4px)'
14 |   		},
15 |   		colors: {
16 |   			background: 'hsl(var(--background))',
17 |   			foreground: 'hsl(var(--foreground))',
18 |   			card: {
19 |   				DEFAULT: 'hsl(var(--card))',
20 |   				foreground: 'hsl(var(--card-foreground))'
21 |   			},
22 |   			popover: {
23 |   				DEFAULT: 'hsl(var(--popover))',
24 |   				foreground: 'hsl(var(--popover-foreground))'
25 |   			},
26 |   			primary: {
27 |   				DEFAULT: 'hsl(var(--primary))',
28 |   				foreground: 'hsl(var(--primary-foreground))'
29 |   			},
30 |   			secondary: {
31 |   				DEFAULT: 'hsl(var(--secondary))',
32 |   				foreground: 'hsl(var(--secondary-foreground))'
33 |   			},
34 |   			muted: {
35 |   				DEFAULT: 'hsl(var(--muted))',
36 |   				foreground: 'hsl(var(--muted-foreground))'
37 |   			},
38 |   			accent: {
39 |   				DEFAULT: 'hsl(var(--accent))',
40 |   				foreground: 'hsl(var(--accent-foreground))'
41 |   			},
42 |   			destructive: {
43 |   				DEFAULT: 'hsl(var(--destructive))',
44 |   				foreground: 'hsl(var(--destructive-foreground))'
45 |   			},
46 |   			border: 'hsl(var(--border))',
47 |   			input: 'hsl(var(--input))',
48 |   			ring: 'hsl(var(--ring))',
49 |   			chart: {
50 |   				'1': 'hsl(var(--chart-1))',
51 |   				'2': 'hsl(var(--chart-2))',
52 |   				'3': 'hsl(var(--chart-3))',
53 |   				'4': 'hsl(var(--chart-4))',
54 |   				'5': 'hsl(var(--chart-5))'
55 |   			},
56 |   			'color-1': 'hsl(var(--color-1))',
57 |   			'color-2': 'hsl(var(--color-2))',
58 |   			'color-3': 'hsl(var(--color-3))',
59 |   			'color-4': 'hsl(var(--color-4))',
60 |   			'color-5': 'hsl(var(--color-5))'
61 |   		},
62 |   		animation: {
63 |   			rainbow: 'rainbow var(--speed, 2s) infinite linear',
64 |   			shine: 'shine var(--duration) infinite linear',
65 |   			'shiny-text': 'shiny-text 8s infinite'
66 |   		},
67 |   		keyframes: {
68 |   			rainbow: {
69 |   				'0%': {
70 |   					'background-position': '0%'
71 |   				},
72 |   				'100%': {
73 |   					'background-position': '200%'
74 |   				}
75 |   			},
76 |   			shine: {
77 |   				'0%': {
78 |   					'background-position': '0% 0%'
79 |   				},
80 |   				'50%': {
81 |   					'background-position': '100% 100%'
82 |   				},
83 |   				to: {
84 |   					'background-position': '0% 0%'
85 |   				}
86 |   			},
87 |   			'shiny-text': {
88 |   				'0%, 90%, 100%': {
89 |   					'background-position': 'calc(-100% - var(--shiny-width)) 0'
90 |   				},
91 |   				'30%, 60%': {
92 |   					'background-position': 'calc(100% + var(--shiny-width)) 0'
93 |   				}
94 |   			}
95 |   		}
96 |   	}
97 |   },
98 |   plugins: [require("tailwindcss-animate")],
99 | }


--------------------------------------------------------------------------------
/src/components/message-input.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useState } from 'react';
 2 | import { Button } from './ui/button';
 3 | import { Loader2Icon, Send } from 'lucide-react';
 4 | import { Input } from './ui/input';
 5 | import { useDebounce } from 'react-use';
 6 | import { useAuthContext } from '@/context/auth-context';
 7 | import { updateTypingStatus } from '@/lib/chat';
 8 | 
 9 | type Props = {
10 |     onSubmit: (e: string) => void;
11 |     isSending: boolean;
12 | };
13 | 
14 | const MessageInput = ({ onSubmit, isSending }: Props) => {
15 |     const { user } = useAuthContext();
16 |     const [message, setMessage] = useState('');
17 |     const [isTyping, setIsTyping] = useState(false);
18 | 
19 |     if (!user) return null;
20 | 
21 |     const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
22 |         e.preventDefault();
23 |         const trimmedMessage = message.trim();
24 | 
25 |         if (isSending || !trimmedMessage) return;
26 | 
27 |         onSubmit(trimmedMessage);
28 |         updateTypingStatus(false, user);
29 |         setMessage('');
30 |     };
31 | 
32 |     useDebounce(
33 |         () => {
34 |             if (isTyping) {
35 |                 updateTypingStatus(false, user);
36 |                 setIsTyping(false);
37 |             }
38 |         },
39 |         1200,
40 |         [message]
41 |     );
42 | 
43 |     const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
44 |         setMessage(e.target.value);
45 | 
46 |         if (!isTyping) {
47 |             updateTypingStatus(true, user);
48 |             setIsTyping(true);
49 |         }
50 |     };
51 | 
52 |     return (
53 |         <div className="p-4 border-t border-border bg-card absolute w-full bottom-0 left-0">
54 |             <div className="absolute w-full top-0 -translate-y-full z-10 h-10 left-0 bg-gradient-to-b from-transparent to-card/70 border-b"></div>
55 | 
56 |             <form onSubmit={handleSubmit} className="flex gap-2 max-w-screen-md mx-auto group">
57 |                 <Input
58 |                     value={message}
59 |                     name="message"
60 |                     placeholder="Write your message here..."
61 |                     className="bg-muted/75"
62 |                     minLength={1}
63 |                     maxLength={250}
64 |                     required
65 |                     disabled={isSending}
66 |                     onChange={handleInputChange}
67 |                 />
68 | 
69 |                 <Button
70 |                     size="icon"
71 |                     className="chat-gradient !bg-gradient-to-br !bg-local text-white rounded-lg shrink-0 group-invalid:grayscale group-invalid:cursor-not-allowed transition-all duration-500"
72 |                     disabled={isSending}
73 |                 >
74 |                     {isSending ? <Loader2Icon className="size-4 animate-spin" /> : <Send className="size-5" />}
75 |                 </Button>
76 |             </form>
77 |         </div>
78 |     );
79 | };
80 | 
81 | export default MessageInput;
82 | 


--------------------------------------------------------------------------------
/src/components/chat-header.tsx:
--------------------------------------------------------------------------------
 1 | import React, { useCallback } from 'react';
 2 | import { GithubIcon, MessageCircleMoreIcon, UserIcon } from 'lucide-react';
 3 | import { User } from '../types';
 4 | import { cn } from '../lib/utils';
 5 | import ProfileAvatar from './profile-avatar';
 6 | import useOnlineCount from '../hooks/useOnlineCount';
 7 | 
 8 | interface ChatHeaderProps {
 9 |     user: User;
10 |     showUsers: boolean;
11 |     setShowUsers: React.Dispatch<React.SetStateAction<boolean>>;
12 | }
13 | 
14 | interface OnlineCountBadgeProps {
15 |     onClick: () => void;
16 |     showUsers: boolean;
17 | }
18 | 
19 | const OnlineCountBadge = ({ onClick, showUsers }: OnlineCountBadgeProps) => {
20 |     const { onlineCount } = useOnlineCount();
21 | 
22 |     const buttonClasses = cn(
23 |         'border w-12 h-[30px] rounded-md',
24 |         'bg-gradient-to-b border-green-500 text-green-400 from-green-500/20 to-green-500/30',
25 |         'font-[Electrolize] font-semibold flex items-center justify-center gap-1'
26 |     );
27 | 
28 |     return (
29 |         <p onClick={onClick} aria-label={`${onlineCount} users online `} className={buttonClasses}>
30 |             {/* Mobile view */}
31 |             <span className="md:hidden flex items-center gap-1 md:gap-3 ">
32 |                 {showUsers ? (
33 |                     <MessageCircleMoreIcon className="size-5 m-0.5" aria-hidden="true" />
34 |                 ) : (
35 |                     <>
36 |                         {onlineCount} <UserIcon className="size-4" aria-hidden="true" />
37 |                     </>
38 |                 )}
39 |             </span>
40 | 
41 |             {/* Desktop view */}
42 |             <span className="hidden md:flex items-center gap-1">
43 |                 {onlineCount} <UserIcon className="size-4" aria-hidden="true" />
44 |             </span>
45 |         </p>
46 |     );
47 | };
48 | 
49 | const ChatHeader: React.FC<ChatHeaderProps> = ({ setShowUsers, showUsers }) => {
50 |     const handleToggleUsers = useCallback(() => setShowUsers(prev => !prev), [setShowUsers]);
51 | 
52 |     return (
53 |         <header className="px-4 py-1 border-b bg-card shadow-md flex gap-2.5 items-center justify-between h-12 z-50 sticky top-0">
54 |             <OnlineCountBadge onClick={handleToggleUsers} showUsers={showUsers} />
55 | 
56 |             <h1 className="text-xl font-bold absolute inset-0 grid place-items-center pointer-events-none">
57 |                 <span className="text-gradient">Chat World</span>
58 |             </h1>
59 | 
60 |             <a
61 |                 href="https://github.com/devXprite/chat-World/"
62 |                 target="_blank"
63 |                 className="ml-auto border bg-gradient-to-b border-cyan-500 text-cyan-400 from-cyan-500/20 to-cyan-500/30 rounded-md px-2 py-1.5 flex gap-1 items-center text-sm"
64 |             >
65 |                 <GithubIcon className="size-4" />
66 |             </a>
67 | 
68 |             <ProfileAvatar />
69 |         </header>
70 |     );
71 | };
72 | 
73 | export default ChatHeader;
74 | 


--------------------------------------------------------------------------------
/src/hooks/useChat.ts:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect, useRef, useCallback } from 'react';
 2 | import { Message, User } from '../types';
 3 | import { differenceBy, uniqBy } from 'lodash';
 4 | import { useSettingsContext } from '../context/settings-context';
 5 | import { loadInitialMessages, loadMoreMessages, sendMessage as sendMessageService, subscribeToNewMessages } from '../lib/chat';
 6 | import { soundManager } from '../lib/sound';
 7 | 
 8 | const useChat = (currentUser: User | null) => {
 9 |     const [messages, setMessages] = useState<Message[]>([]);
10 |     const [isLoading, setIsLoading] = useState(true);
11 |     const [isSending, setIsSending] = useState(false);
12 |     const [hasMore, setHasMore] = useState(true);
13 | 
14 |     const store = useRef<{ lastMessageRef: any | null }>({ lastMessageRef: null });
15 |     const { settings } = useSettingsContext();
16 | 
17 |     // Load initial messages
18 |     useEffect(() => {
19 |         if (messages.length > 0) return;
20 | 
21 |         const fetchInitialMessages = async () => {
22 |             const { messages: initialMessages, hasMore: moreAvailable, lastDoc } = await loadInitialMessages();
23 | 
24 |             setMessages(uniqBy(initialMessages.reverse(), 'id'));
25 |             store.current.lastMessageRef = lastDoc;
26 |             setHasMore(moreAvailable);
27 |             setIsLoading(false);
28 |         };
29 | 
30 |         fetchInitialMessages();
31 |     }, [messages.length]);
32 | 
33 |     // Subscribe to new messages
34 |     useEffect(() => {
35 |         const unsubscribe = subscribeToNewMessages(newMsgs => {
36 |             setMessages(prevMessages => {
37 |                 const uniqueNewMsgs = differenceBy(newMsgs, prevMessages, 'id');
38 |                 if (uniqueNewMsgs.length > 0 && settings.soundEnabled) soundManager.play('newMessage');
39 |                 return uniqBy([...prevMessages, ...uniqueNewMsgs], 'id');
40 |             });
41 |         });
42 | 
43 |         return () => unsubscribe();
44 |     }, [settings.soundEnabled]);
45 | 
46 |     const loadMore = useCallback(async () => {
47 |         if (!store.current.lastMessageRef || !hasMore) return;
48 | 
49 |         setIsLoading(true);
50 |         const { messages: olderMessages, hasMore: moreOlderMessages, lastDoc } = await loadMoreMessages(store.current.lastMessageRef);
51 | 
52 |         setMessages(prevMessages => uniqBy([...olderMessages.reverse(), ...prevMessages], 'id'));
53 |         setIsLoading(false);
54 | 
55 |         setHasMore(moreOlderMessages);
56 |         store.current.lastMessageRef = lastDoc;
57 |     }, [hasMore]);
58 | 
59 |     const sendMessage = useCallback(
60 |         async (content: string) => {
61 |             if (!currentUser) return;
62 | 
63 |             setIsSending(true);
64 |             try {
65 |                 await sendMessageService(content, currentUser);
66 |             } catch (error) {
67 |                 console.error('Error sending message:', error);
68 |             } finally {
69 |                 setIsSending(false);
70 |             }
71 |         },
72 |         [currentUser]
73 |     );
74 | 
75 |     return { messages, isLoading, isSending, sendMessage, loadMore, hasMore };
76 | };
77 | 
78 | export default useChat;
79 | 


--------------------------------------------------------------------------------
/src/lib/chat.ts:
--------------------------------------------------------------------------------
 1 | import { ref, serverTimestamp as serverTimestampRealtime, set } from 'firebase/database';
 2 | import { db, rtdb } from '../lib/firebase';
 3 | import { Message, TypingStatus, User } from '../types';
 4 | import { collection, query, orderBy, limit, getDocs } from 'firebase/firestore';
 5 | import { startAfter, addDoc, serverTimestamp, QueryDocumentSnapshot, onSnapshot } from 'firebase/firestore';
 6 | 
 7 | const INITIAL_MESSAGES = 75;
 8 | const MESSAGES_PER_PAGE = 50;
 9 | 
10 | const loadInitialMessages = async () => {
11 |     const q = query(collection(db, 'messages'), orderBy('timestamp', 'desc'), limit(INITIAL_MESSAGES));
12 |     const snapshot = await getDocs(q);
13 | 
14 |     console.log('Loading initial messages...');
15 | 
16 |     return {
17 |         messages: snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })) as Message[],
18 |         lastDoc: snapshot.docs[snapshot.docs.length - 1],
19 |         hasMore: snapshot.docs.length === INITIAL_MESSAGES,
20 |     };
21 | };
22 | 
23 | const loadMoreMessages = async (lastDoc: QueryDocumentSnapshot) => {
24 |     const q = query(collection(db, 'messages'), orderBy('timestamp', 'desc'), startAfter(lastDoc), limit(MESSAGES_PER_PAGE));
25 |     const snapshot = await getDocs(q);
26 | 
27 |     console.log('Loading more messages...');
28 | 
29 |     return {
30 |         messages: snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })) as Message[],
31 |         lastDoc: snapshot.docs[snapshot.docs.length - 1],
32 |         hasMore: snapshot.docs.length === MESSAGES_PER_PAGE,
33 |     };
34 | };
35 | 
36 | const subscribeToNewMessages = (onUpdate: (messages: Message[]) => void, onError?: (error: Error) => void) => {
37 |     const q = query(collection(db, 'messages'), orderBy('timestamp', 'desc'), limit(1));
38 |     console.log('Subscribing to new messages...');
39 | 
40 |     return onSnapshot(
41 |         q,
42 |         snapshot => {
43 |             console.log('New message received...');
44 |             const newMessages = snapshot.docs.map(doc => ({ id: doc.id, ...doc.data() })) as Message[];
45 |             if (newMessages.length > 0) onUpdate(newMessages);
46 |         },
47 |         onError
48 |     );
49 | };
50 | 
51 | const sendMessage = async (content: string, currentUser: User) => {
52 |     console.log('Sending message...');
53 | 
54 |     const newMessage: Partial<Message> = {
55 |         content,
56 |         userId: currentUser.id,
57 |         userName: currentUser.name,
58 |         userCountry: currentUser.country,
59 |         timestamp: serverTimestamp(),
60 |     };
61 | 
62 |     return addDoc(collection(db, 'messages'), newMessage);
63 | };
64 | 
65 | const updateTypingStatus = (isTyping: boolean, user: User) => {
66 |     try {
67 |         const typingStatusRef = ref(rtdb, `typingStatus/${user.id}`);
68 |         const typingData: Partial<TypingStatus> = {
69 |             name: user.name,
70 |             isTyping,
71 |             updatedAt: serverTimestampRealtime(),
72 |         };
73 | 
74 |         set(typingStatusRef, typingData);
75 |     } catch (error) {
76 |         console.error('Error updating typing:', error);
77 |     }
78 | };
79 | 
80 | export { loadInitialMessages, loadMoreMessages, subscribeToNewMessages, sendMessage, updateTypingStatus };
81 | 


--------------------------------------------------------------------------------
/src/components/settings-dialog.tsx:
--------------------------------------------------------------------------------
 1 | import { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './ui/dialog';
 2 | import { DialogProps } from '@radix-ui/react-dialog';
 3 | import { Switch } from './ui/switch';
 4 | import { Label } from './ui/label';
 5 | import { useSettingsContext } from '../context/settings-context';
 6 | 
 7 | interface Props extends DialogProps {}
 8 | 
 9 | const SettingsDialog = ({ open, onOpenChange }: Props) => {
10 |     const { settings, updateSetting } = useSettingsContext();
11 | 
12 |     return (
13 |         <Dialog open={open} onOpenChange={onOpenChange}>
14 |             <DialogContent className="max-w-sm">
15 |                 <DialogHeader>
16 |                     <DialogTitle>Settings</DialogTitle>
17 |                     <DialogDescription>Configure your preferences</DialogDescription>
18 |                 </DialogHeader>
19 |                 <div className="grid gap-4 py-4">
20 |                     <div className="flex items-center justify-between space-x-2">
21 |                         <Label htmlFor="auto-scroll">Auto Scroll</Label>
22 |                         <Switch
23 |                             id="auto-scroll"
24 |                             checked={settings['autoScroll']}
25 |                             onCheckedChange={e => updateSetting('autoScroll', e)}
26 |                         />
27 |                     </div>
28 | 
29 |                     <div className="flex items-center justify-between space-x-2">
30 |                         <Label htmlFor="scrollIndicator">Scroll Indicator</Label>
31 |                         <Switch
32 |                             id="scrollIndicator"
33 |                             checked={settings['scrollIndicator']}
34 |                             onCheckedChange={e => updateSetting('scrollIndicator', e)}
35 |                         />
36 |                     </div>
37 | 
38 |                     {/* Profanity, Sound */}
39 |                     <div className="flex items-center justify-between space-x-2">
40 |                         <Label htmlFor="profanity-filter">Profanity Filter</Label>
41 |                         <Switch
42 |                             id="profanity-filter"
43 |                             checked={settings['profanityFilter']}
44 |                             onCheckedChange={e => updateSetting('profanityFilter', e)}
45 |                         />
46 |                     </div>
47 | 
48 |                     <div className="flex items-center justify-between space-x-2">
49 |                         <Label htmlFor="sound">Sound</Label>
50 |                         <Switch
51 |                             id="sound"
52 |                             checked={settings['soundEnabled']}
53 |                             onCheckedChange={e => updateSetting('soundEnabled', e)}
54 |                         />
55 |                     </div>
56 |                 </div>
57 |                 {/* <DialogFooter>
58 |                     <Button size={'sm'} onClick={() => onOpenChange(false)}>
59 |                         Save <Save className="ml-2 size-4" />
60 |                     </Button>
61 |                 </DialogFooter> */}
62 |             </DialogContent>
63 |         </Dialog>
64 |     );
65 | };
66 | 
67 | export default SettingsDialog;
68 | 


--------------------------------------------------------------------------------
/src/components/profile-avatar.tsx:
--------------------------------------------------------------------------------
 1 | import { useState } from 'react';
 2 | import {
 3 |     DropdownMenu,
 4 |     DropdownMenuContent,
 5 |     DropdownMenuItem,
 6 |     DropdownMenuLabel,
 7 |     DropdownMenuSeparator,
 8 |     DropdownMenuTrigger,
 9 | } from './ui/dropdown-menu';
10 | import { format } from 'date-fns';
11 | import { CodeSquare, FileWarningIcon, Info, LogOut, Settings, UserIcon } from 'lucide-react';
12 | import countries from '../data/country-data';
13 | import LogoutDialog from './logout-dialog';
14 | import SettingsDialog from './settings-dialog';
15 | import { useAuthContext } from '../context/auth-context';
16 | 
17 | const ProfileAvatar = () => {
18 |     const { user, isLoading } = useAuthContext();
19 |     if (!user || isLoading) return <div></div>;
20 | 
21 |     const [settingsOpen, setSettingsOpen] = useState(false);
22 |     const [logoutOpen, setLogoutOpen] = useState(false);
23 | 
24 |     return (
25 |         <div>
26 |             <SettingsDialog open={settingsOpen} onOpenChange={setSettingsOpen} />
27 |             <LogoutDialog open={logoutOpen} onOpenChange={setLogoutOpen} />
28 | 
29 |             <DropdownMenu>
30 |                 <DropdownMenuTrigger asChild>
31 |                     <p className="size-8 cursor-pointer border rounded-full bg-gradient-to-b border-orange-500 text-orange-400 from-orange-500/20 to-orange-500/30 grid place-items-center">
32 |                         <UserIcon className="size-5" />
33 |                         {/* <BadgeInfo className='size-5' /> */}
34 |                     </p>
35 |                 </DropdownMenuTrigger>
36 |                 <DropdownMenuContent align="end" className="min-w-48">
37 |                     <DropdownMenuLabel>{user?.name}</DropdownMenuLabel>
38 |                     <DropdownMenuLabel className="text-xs font-normal text-muted-foreground -mt-2">
39 |                         <b>Country:</b> {countries[user?.country]?.name}{' '}
40 |                         <img className="size-5 inline" src={countries[user?.country]?.image} />
41 |                         {/* ({countries[user?.country].emoji}) */}
42 |                     </DropdownMenuLabel>
43 |                     {user && user.createdAt && user.createdAt.toDate && (
44 |                         <DropdownMenuLabel className="text-xs font-normal text-muted-foreground -mt-2">
45 |                             <b>Joined:</b> {format(user?.createdAt?.toDate(), 'd MMM yyyy, h:mm a')}
46 |                         </DropdownMenuLabel>
47 |                     )}
48 |                     <DropdownMenuSeparator />
49 |                     <DropdownMenuItem onClick={() => setSettingsOpen(true)}>
50 |                         <Settings /> Settings
51 |                     </DropdownMenuItem>
52 |                     <DropdownMenuItem asChild>
53 |                         <a href="https://github.com/devXprite/chat-World/" target="_blank">
54 |                             <CodeSquare className="size-2" />
55 |                             Source Code
56 |                         </a>
57 |                     </DropdownMenuItem>
58 |                     <DropdownMenuItem asChild>
59 |                         <a href="https://github.com/devXprite/chat-World/" target="_blank">
60 |                             <Info className="size-2" />
61 |                             About
62 |                         </a>
63 |                     </DropdownMenuItem>
64 |                     <DropdownMenuItem asChild>
65 |                         <a href="https://github.com/devXprite/Chat-World/issues/new/" target="_blank">
66 |                             <FileWarningIcon className="size-2" />
67 |                             Report Issue
68 |                         </a>
69 |                     </DropdownMenuItem>
70 |                     <DropdownMenuSeparator />
71 |                     <DropdownMenuItem onClick={() => setLogoutOpen(true)}>
72 |                         <LogOut className="size-2" />
73 |                         Logout
74 |                     </DropdownMenuItem>
75 |                 </DropdownMenuContent>
76 |             </DropdownMenu>
77 |         </div>
78 |     );
79 | };
80 | 
81 | export default ProfileAvatar;
82 | 


--------------------------------------------------------------------------------
/src/components/ui/dialog.tsx:
--------------------------------------------------------------------------------
 1 | import * as React from 'react';
 2 | import * as DialogPrimitive from '@radix-ui/react-dialog';
 3 | import { X } from 'lucide-react';
 4 | 
 5 | import { cn } from '@/lib/utils';
 6 | 
 7 | const Dialog = DialogPrimitive.Root;
 8 | 
 9 | const DialogTrigger = DialogPrimitive.Trigger;
10 | 
11 | const DialogPortal = DialogPrimitive.Portal;
12 | 
13 | const DialogClose = DialogPrimitive.Close;
14 | 
15 | const DialogOverlay = React.forwardRef<
16 |     React.ElementRef<typeof DialogPrimitive.Overlay>,
17 |     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
18 | >(({ className, ...props }, ref) => (
19 |     <DialogPrimitive.Overlay
20 |         ref={ref}
21 |         className={cn(
22 |             'fixed inset-0 z-50 bg-black/50 backdrop-blur data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
23 |             className
24 |         )}
25 |         {...props}
26 |     />
27 | ));
28 | DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
29 | 
30 | const DialogContent = React.forwardRef<
31 |     React.ElementRef<typeof DialogPrimitive.Content>,
32 |     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
33 | >(({ className, children, ...props }, ref) => (
34 |     <DialogPortal>
35 |         <DialogOverlay />
36 |         <DialogPrimitive.Content
37 |             ref={ref}
38 |             className={cn(
39 |                 'fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg w-[calc(100vw-2rem)]',
40 |                 className
41 |             )}
42 |             {...props}
43 |         >
44 |             {children}
45 |             <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
46 |                 <X className="h-4 w-4" />
47 |                 <span className="sr-only">Close</span>
48 |             </DialogPrimitive.Close>
49 |         </DialogPrimitive.Content>
50 |     </DialogPortal>
51 | ));
52 | DialogContent.displayName = DialogPrimitive.Content.displayName;
53 | 
54 | const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
55 |     <div className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)} {...props} />
56 | );
57 | DialogHeader.displayName = 'DialogHeader';
58 | 
59 | const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
60 |     <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
61 | );
62 | DialogFooter.displayName = 'DialogFooter';
63 | 
64 | const DialogTitle = React.forwardRef<
65 |     React.ElementRef<typeof DialogPrimitive.Title>,
66 |     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
67 | >(({ className, ...props }, ref) => (
68 |     <DialogPrimitive.Title
69 |         ref={ref}
70 |         className={cn('text-lg font-semibold leading-none tracking-tight', className)}
71 |         {...props}
72 |     />
73 | ));
74 | DialogTitle.displayName = DialogPrimitive.Title.displayName;
75 | 
76 | const DialogDescription = React.forwardRef<
77 |     React.ElementRef<typeof DialogPrimitive.Description>,
78 |     React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
79 | >(({ className, ...props }, ref) => (
80 |     <DialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
81 | ));
82 | DialogDescription.displayName = DialogPrimitive.Description.displayName;
83 | 
84 | export {
85 |     Dialog,
86 |     DialogPortal,
87 |     DialogOverlay,
88 |     DialogTrigger,
89 |     DialogClose,
90 |     DialogContent,
91 |     DialogHeader,
92 |     DialogFooter,
93 |     DialogTitle,
94 |     DialogDescription,
95 | };
96 | 


--------------------------------------------------------------------------------
/src/components/ui/animated-grid-pattern.tsx:
--------------------------------------------------------------------------------
  1 | "use client";
  2 | 
  3 | import { motion } from "motion/react";
  4 | import { useEffect, useId, useRef, useState } from "react";
  5 | 
  6 | import { cn } from "@/lib/utils";
  7 | 
  8 | interface AnimatedGridPatternProps {
  9 |   width?: number;
 10 |   height?: number;
 11 |   x?: number;
 12 |   y?: number;
 13 |   strokeDasharray?: any;
 14 |   numSquares?: number;
 15 |   className?: string;
 16 |   maxOpacity?: number;
 17 |   duration?: number;
 18 |   repeatDelay?: number;
 19 | }
 20 | 
 21 | export default function AnimatedGridPattern({
 22 |   width = 40,
 23 |   height = 40,
 24 |   x = -1,
 25 |   y = -1,
 26 |   strokeDasharray = 0,
 27 |   numSquares = 50,
 28 |   className,
 29 |   maxOpacity = 0.5,
 30 |   duration = 4,
 31 |   repeatDelay = 0.5,
 32 |   ...props
 33 | }: AnimatedGridPatternProps) {
 34 |   const id = useId();
 35 |   const containerRef = useRef(null);
 36 |   const [dimensions, setDimensions] = useState({ width: 0, height: 0 });
 37 |   const [squares, setSquares] = useState(() => generateSquares(numSquares));
 38 | 
 39 |   function getPos() {
 40 |     return [
 41 |       Math.floor((Math.random() * dimensions.width) / width),
 42 |       Math.floor((Math.random() * dimensions.height) / height),
 43 |     ];
 44 |   }
 45 | 
 46 |   // Adjust the generateSquares function to return objects with an id, x, and y
 47 |   function generateSquares(count: number) {
 48 |     return Array.from({ length: count }, (_, i) => ({
 49 |       id: i,
 50 |       pos: getPos(),
 51 |     }));
 52 |   }
 53 | 
 54 |   // Function to update a single square's position
 55 |   const updateSquarePosition = (id: number) => {
 56 |     setSquares((currentSquares) =>
 57 |       currentSquares.map((sq) =>
 58 |         sq.id === id
 59 |           ? {
 60 |               ...sq,
 61 |               pos: getPos(),
 62 |             }
 63 |           : sq,
 64 |       ),
 65 |     );
 66 |   };
 67 | 
 68 |   // Update squares to animate in
 69 |   useEffect(() => {
 70 |     if (dimensions.width && dimensions.height) {
 71 |       setSquares(generateSquares(numSquares));
 72 |     }
 73 |   }, [dimensions, numSquares]);
 74 | 
 75 |   // Resize observer to update container dimensions
 76 |   useEffect(() => {
 77 |     const resizeObserver = new ResizeObserver((entries) => {
 78 |       for (let entry of entries) {
 79 |         setDimensions({
 80 |           width: entry.contentRect.width,
 81 |           height: entry.contentRect.height,
 82 |         });
 83 |       }
 84 |     });
 85 | 
 86 |     if (containerRef.current) {
 87 |       resizeObserver.observe(containerRef.current);
 88 |     }
 89 | 
 90 |     return () => {
 91 |       if (containerRef.current) {
 92 |         resizeObserver.unobserve(containerRef.current);
 93 |       }
 94 |     };
 95 |   }, [containerRef]);
 96 | 
 97 |   return (
 98 |     <svg
 99 |       ref={containerRef}
100 |       aria-hidden="true"
101 |       className={cn(
102 |         "pointer-events-none absolute inset-0 h-full w-full fill-gray-400/30 stroke-gray-400/30",
103 |         className,
104 |       )}
105 |       {...props}
106 |     >
107 |       <defs>
108 |         <pattern
109 |           id={id}
110 |           width={width}
111 |           height={height}
112 |           patternUnits="userSpaceOnUse"
113 |           x={x}
114 |           y={y}
115 |         >
116 |           <path
117 |             d={`M.5 ${height}V.5H${width}`}
118 |             fill="none"
119 |             strokeDasharray={strokeDasharray}
120 |           />
121 |         </pattern>
122 |       </defs>
123 |       <rect width="100%" height="100%" fill={`url(#${id})`} />
124 |       <svg x={x} y={y} className="overflow-visible">
125 |         {squares.map(({ pos: [x, y], id }, index) => (
126 |           <motion.rect
127 |             initial={{ opacity: 0 }}
128 |             animate={{ opacity: maxOpacity }}
129 |             transition={{
130 |               duration,
131 |               repeat: 1,
132 |               delay: index * 0.1,
133 |               repeatType: "reverse",
134 |             }}
135 |             onAnimationComplete={() => updateSquarePosition(id)}
136 |             key={`${x}-${y}-${index}`}
137 |             width={width - 1}
138 |             height={height - 1}
139 |             x={x * width + 1}
140 |             y={y * height + 1}
141 |             fill="currentColor"
142 |             strokeWidth="0"
143 |           />
144 |         ))}
145 |       </svg>
146 |     </svg>
147 |   );
148 | }
149 | 


--------------------------------------------------------------------------------
/src/components/chat-area.tsx:
--------------------------------------------------------------------------------
  1 | import { Fragment, useEffect, useRef, useMemo, memo } from 'react';
  2 | import { LoaderCircle } from 'lucide-react';
  3 | import { useScrolling } from 'react-use';
  4 | import { ScrollArea } from './ui/scroll-area';
  5 | import MessageBubble from './ui/message-bubble';
  6 | import { isSameDay } from 'date-fns';
  7 | import LoadMore from './load-more-btn';
  8 | import useChat from '@/hooks/useChat';
  9 | import useTyping from '@/hooks/useTyping';
 10 | import MessageInput from './message-input';
 11 | import TypingBubble from './typing-bubble';
 12 | import { useAuthContext } from '@/context/auth-context';
 13 | import { useSettingsContext } from '@/context/settings-context';
 14 | import { cn, formatDateCalendar } from '@/lib/utils';
 15 | import ScrollProgress from './ui/scroll-progress';
 16 | 
 17 | import type { Message } from '@/types';
 18 | 
 19 | const DateDivider = (({ date }: { date: Message['timestamp'] }) => (
 20 |     <div className="border bg-muted text-muted-foreground w-fit mx-auto text-xs py-1 px-2 rounded-md mt-5 mb-3">
 21 |         {formatDateCalendar(date?.toDate())}
 22 |     </div>
 23 | ));
 24 | 
 25 | const MessageLoader = memo(() => (
 26 |     <div className="w-full h-[80vh] flex flex-col gap-2 items-center justify-center text-muted-foreground/75">
 27 |         <LoaderCircle className="size-8 animate-spin" />
 28 |         <p className="animate-pulse">Loading Messages...</p>
 29 |     </div>
 30 | ));
 31 | MessageLoader.displayName = 'MessageLoader';
 32 | 
 33 | const ChatArea = () => {
 34 |     const { user } = useAuthContext();
 35 |     const { typingUsers } = useTyping();
 36 |     const { settings } = useSettingsContext();
 37 |     const chatContainerRef = useRef<HTMLDivElement>(null);
 38 |     const isScrolling = useScrolling(chatContainerRef);
 39 |     const { messages, sendMessage, isSending, isLoading, hasMore, loadMore } = useChat(user);
 40 | 
 41 |     const shouldShowDate =  useMemo(() => {
 42 |        return (msg: Message, lastMsg: Message) => {
 43 |             const currentTimestamp = msg.timestamp?.toDate();
 44 |             const lastTimestamp = lastMsg?.timestamp?.toDate();
 45 |     
 46 |             if (!currentTimestamp) return false;
 47 |             if (!lastTimestamp && currentTimestamp) return true;
 48 |     
 49 |             return !isSameDay(lastTimestamp, currentTimestamp);
 50 |         }
 51 |     }, []);
 52 | 
 53 |     useEffect(() => {
 54 |         const shouldAutoScroll = messages.length > 0 && chatContainerRef.current && settings.autoScroll && !isScrolling;
 55 | 
 56 |         if (shouldAutoScroll) {
 57 |             const chatContainer = chatContainerRef.current;
 58 |             requestAnimationFrame(() => {
 59 |                 chatContainer.scrollTo({
 60 |                     top: chatContainer.scrollHeight,
 61 |                     behavior: 'smooth',
 62 |                 });
 63 |             });
 64 |         }
 65 |     }, [messages[messages.length - 1]?.id, settings.autoScroll]);
 66 | 
 67 |     const messageList = useMemo(() => {
 68 |         return messages.map((msg, i) => (
 69 |             <Fragment key={msg.id}>
 70 |                 {shouldShowDate(msg, messages[i - 1]) && <DateDivider date={msg.timestamp} />}
 71 |                 <MessageBubble
 72 |                     {...msg}
 73 |                     isOwnMessage={msg.userId === user?.id}
 74 |                     showName={messages[i - 1]?.userId !== msg.userId || shouldShowDate(msg, messages[i - 1])}
 75 |                 />
 76 |             </Fragment>
 77 |         ));
 78 |     }, [messages.length, user?.id, shouldShowDate]);
 79 | 
 80 |     // console.log('Render...');
 81 | 
 82 |     if (isLoading && messages.length < 2) return <MessageLoader />;
 83 | 
 84 |     return (
 85 |         <div className="w-full border-r h-full overflow-hidden flex bg-muted/35 md:relative">
 86 |             {settings.scrollIndicator && messages.length > 0 && (
 87 |                 <ScrollProgress container={chatContainerRef} className="max-md:top-12 h-[1px]" />
 88 |             )}
 89 |             <ScrollArea
 90 |                 ref={chatContainerRef}
 91 |                 className={cn('w-full px-2 overflow-y-auto relative', isLoading && messages.length === 0 && 'hidden')}
 92 |             >
 93 |                 <div className="grid gap-1 w-full max-w-screen-md mx-auto mb-80 mt-6">
 94 |                     {hasMore && <LoadMore onClick={loadMore} isLoading={isLoading} />}
 95 |                     {messageList}
 96 |                     <TypingBubble typingUsers={typingUsers} />
 97 |                 </div>
 98 |             </ScrollArea>
 99 | 
100 |             <MessageInput onSubmit={sendMessage} isSending={isSending} />
101 |         </div>
102 |     );
103 | };
104 | 
105 | export default memo(ChatArea);
106 | 


--------------------------------------------------------------------------------
/src/components/ui/alert-dialog.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
  3 | 
  4 | import { cn } from '@/lib/utils';
  5 | import { buttonVariants } from '@/components/ui/button';
  6 | 
  7 | const AlertDialog = AlertDialogPrimitive.Root;
  8 | 
  9 | const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 10 | 
 11 | const AlertDialogPortal = AlertDialogPrimitive.Portal;
 12 | 
 13 | const AlertDialogOverlay = React.forwardRef<
 14 |     React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
 15 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>
 16 | >(({ className, ...props }, ref) => (
 17 |     <AlertDialogPrimitive.Overlay
 18 |         className={cn(
 19 |             'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0',
 20 |             className
 21 |         )}
 22 |         {...props}
 23 |         ref={ref}
 24 |     />
 25 | ));
 26 | AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 27 | 
 28 | const AlertDialogContent = React.forwardRef<
 29 |     React.ElementRef<typeof AlertDialogPrimitive.Content>,
 30 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>
 31 | >(({ className, ...props }, ref) => (
 32 |     <AlertDialogPortal>
 33 |         <AlertDialogOverlay />
 34 |         <AlertDialogPrimitive.Content
 35 |             ref={ref}
 36 |             className={cn(
 37 |                 'fixed left-[50%] top-[50%] z-50 grid max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] rounded-lg w-[calc(100vw-2rem)]',
 38 |                 className
 39 |             )}
 40 |             {...props}
 41 |         />
 42 |     </AlertDialogPortal>
 43 | ));
 44 | AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 45 | 
 46 | const AlertDialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 47 |     <div className={cn('flex flex-col space-y-2 text-center sm:text-left', className)} {...props} />
 48 | );
 49 | AlertDialogHeader.displayName = 'AlertDialogHeader';
 50 | 
 51 | const AlertDialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
 52 |     <div className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)} {...props} />
 53 | );
 54 | AlertDialogFooter.displayName = 'AlertDialogFooter';
 55 | 
 56 | const AlertDialogTitle = React.forwardRef<
 57 |     React.ElementRef<typeof AlertDialogPrimitive.Title>,
 58 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>
 59 | >(({ className, ...props }, ref) => (
 60 |     <AlertDialogPrimitive.Title ref={ref} className={cn('text-lg font-semibold', className)} {...props} />
 61 | ));
 62 | AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 63 | 
 64 | const AlertDialogDescription = React.forwardRef<
 65 |     React.ElementRef<typeof AlertDialogPrimitive.Description>,
 66 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>
 67 | >(({ className, ...props }, ref) => (
 68 |     <AlertDialogPrimitive.Description ref={ref} className={cn('text-sm text-muted-foreground', className)} {...props} />
 69 | ));
 70 | AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
 71 | 
 72 | const AlertDialogAction = React.forwardRef<
 73 |     React.ElementRef<typeof AlertDialogPrimitive.Action>,
 74 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>
 75 | >(({ className, ...props }, ref) => (
 76 |     <AlertDialogPrimitive.Action ref={ref} className={cn(buttonVariants(), className)} {...props} />
 77 | ));
 78 | AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 79 | 
 80 | const AlertDialogCancel = React.forwardRef<
 81 |     React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
 82 |     React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>
 83 | >(({ className, ...props }, ref) => (
 84 |     <AlertDialogPrimitive.Cancel
 85 |         ref={ref}
 86 |         className={cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', className)}
 87 |         {...props}
 88 |     />
 89 | ));
 90 | AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 91 | 
 92 | export {
 93 |     AlertDialog,
 94 |     AlertDialogPortal,
 95 |     AlertDialogOverlay,
 96 |     AlertDialogTrigger,
 97 |     AlertDialogContent,
 98 |     AlertDialogHeader,
 99 |     AlertDialogFooter,
100 |     AlertDialogTitle,
101 |     AlertDialogDescription,
102 |     AlertDialogAction,
103 |     AlertDialogCancel,
104 | };
105 | 


--------------------------------------------------------------------------------
/src/pages/home.tsx:
--------------------------------------------------------------------------------
  1 | import { ArrowRight, Github, Loader2 } from 'lucide-react';
  2 | import ShineBorder from '../components/ui/shine-border';
  3 | import { CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '../components/ui/card';
  4 | import { Input } from '../components/ui/input';
  5 | import { Button } from '../components/ui/button';
  6 | import AnimatedGridPattern from '../components/ui/animated-grid-pattern';
  7 | import AnimatedShinyText from '../components/ui/animated-shiny-text';
  8 | import { useAuthContext } from '../context/auth-context';
  9 | 
 10 | type Props = {};
 11 | 
 12 | const Home = ({}: Props) => {
 13 |     const { initializeUser, isInitializing } = useAuthContext();
 14 | 
 15 |     const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
 16 |         e.preventDefault;
 17 |         const name = (e.target as any).name.value;
 18 |         initializeUser(name);
 19 |     };
 20 | 
 21 |     const LoginCard = () => (
 22 |         <ShineBorder
 23 |             className="mt-14 md:mt-24 backdrop-blur bg-card/50 relative w-full max-w-xl mx-auto"
 24 |             color={['#3b82f6', '#a855f7', '#f43f5e']}
 25 |             borderWidth={2}
 26 |             borderRadius={24}
 27 |         >
 28 |             <form onSubmit={handleSubmit} className="w-full">
 29 |                 <CardHeader>
 30 |                     <CardTitle>Join the Chat</CardTitle>
 31 |                     <CardDescription>Enter your name to join the chat</CardDescription>
 32 |                 </CardHeader>
 33 |                 <CardContent>
 34 |                     <Input
 35 |                         name="name"
 36 |                         placeholder="Enter your name"
 37 |                         className="bg-muted/50"
 38 |                         minLength={2}
 39 |                         maxLength={30}
 40 |                         autoComplete="name"
 41 |                         required
 42 |                     />
 43 |                 </CardContent>
 44 |                 <CardFooter>
 45 |                     <Button className="ml-auto">
 46 |                         Join the Chat <ArrowRight />{' '}
 47 |                     </Button>
 48 |                 </CardFooter>
 49 |             </form>
 50 |         </ShineBorder>
 51 |     );
 52 | 
 53 |     return (
 54 |         <div className="min-h-dvh relative">
 55 |             <AnimatedGridPattern
 56 |                 width={35}
 57 |                 height={35}
 58 |                 maxOpacity={0.2}
 59 |                 className={'[mask-image:linear-gradient(to_top,#fff9,transparent)]'}
 60 |             />
 61 |             <div className="max-w-screen-xl mx-auto px-3 py-8 min-h-dvh flex items-center justify-center">
 62 |                 <div className="-translate-y-3 md:-translate-y-6">
 63 |                     <div
 64 |                         className={
 65 |                             'group relative z-10 w-fit mx-auto rounded-full border border-black/5 bg-neutral-100 text-base text-white transition-all ease-in hover:cursor-pointer hover:bg-neutral-200 dark:border-white/5 dark:bg-neutral-900 dark:hover:bg-neutral-800'
 66 |                         }
 67 |                         data-aos="fade-up"
 68 |                         data-aos-delay="100"
 69 |                     >
 70 |                         <a href="https://github.com/devXprite/Chat-World/" target="_blank">
 71 |                             <AnimatedShinyText className="inline-flex items-center justify-center px-3 py-1 transition ease-out hover:text-neutral-600 hover:duration-300 hover:dark:text-neutral-400  text-sm">
 72 |                                 <span>
 73 |                                     <Github className="size-4 mr-1 inline" />
 74 |                                     View on GitHub
 75 |                                 </span>
 76 |                             </AnimatedShinyText>
 77 |                         </a>
 78 |                     </div>
 79 | 
 80 |                     <h1 className="text-3xl md:text-5xl mt-6 leading-[1.1] font-bold text-center" data-aos="fade-up" data-aos-delay="300">
 81 |                         Welcome to <span className="text-gradient">ChatWorld</span>
 82 |                     </h1>
 83 |                     <p
 84 |                         className="text-muted-foreground mt-2 md:mt-4 max-w-screen-sm mx-auto text-center md:text-xl"
 85 |                         data-aos="fade-up"
 86 |                         data-aos-delay="500"
 87 |                     >
 88 |                         Experience a simple, seamless way to chat. Just enter your name and join the global community. No signup, no hassle.
 89 |                     </p>
 90 | 
 91 |                     <div data-aos="fade-up" data-aos-delay="800">
 92 |                         {isInitializing ? (
 93 |                             <div className="mt-24 h-40 flex items-center justify-center">
 94 |                                 <Loader2 className="size-14 animate-spin " />
 95 |                             </div>
 96 |                         ) : (
 97 |                             <LoginCard />
 98 |                         )}
 99 |                     </div>
100 |                 </div>
101 |             </div>
102 |         </div>
103 |     );
104 | };
105 | 
106 | export default Home;
107 | 


--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
  1 | /* @import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&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&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
  2 | @import url('https://fonts.googleapis.com/css2?family=Electrolize&display=swap'); */
  3 | 
  4 | @tailwind base;
  5 | @tailwind components;
  6 | @tailwind utilities;
  7 | 
  8 | @layer base {
  9 |     :root {
 10 |         --background: 0 0% 100%;
 11 |         --foreground: 0 0% 3.9%;
 12 |         --card: 0 0% 100%;
 13 |         --card-foreground: 0 0% 3.9%;
 14 |         --popover: 0 0% 100%;
 15 |         --popover-foreground: 0 0% 3.9%;
 16 |         --primary: 0 0% 9%;
 17 |         --primary-foreground: 0 0% 98%;
 18 |         --secondary: 0 0% 96.1%;
 19 |         --secondary-foreground: 0 0% 9%;
 20 |         --muted: 0 0% 96.1%;
 21 |         --muted-foreground: 0 0% 45.1%;
 22 |         --accent: 0 0% 96.1%;
 23 |         --accent-foreground: 0 0% 9%;
 24 |         --destructive: 0 84.2% 60.2%;
 25 |         --destructive-foreground: 0 0% 98%;
 26 |         --border: 0 0% 89.8%;
 27 |         --input: 0 0% 89.8%;
 28 |         --ring: 0 0% 3.9%;
 29 |         --chart-1: 12 76% 61%;
 30 |         --chart-2: 173 58% 39%;
 31 |         --chart-3: 197 37% 24%;
 32 |         --chart-4: 43 74% 66%;
 33 |         --chart-5: 27 87% 67%;
 34 |         --radius: 0.5rem;
 35 |         --color-1: 0 100% 63%;
 36 |         --color-2: 270 100% 63%;
 37 |         --color-3: 210 100% 63%;
 38 |         --color-4: 195 100% 63%;
 39 |         --color-5: 90 100% 63%;
 40 |     }
 41 | 
 42 |     .dark {
 43 |         --background: 0 0% 2%;
 44 |         --foreground: 0 0% 98%;
 45 |         --card: 0 0% 3.5%;
 46 |         --card-foreground: 0 0% 98%;
 47 |         --popover: 0 0% 3.9%;
 48 |         --popover-foreground: 0 0% 98%;
 49 |         --primary: 0 0% 98%;
 50 |         --primary-foreground: 0 0% 9%;
 51 |         --secondary: 0 0% 14.9%;
 52 |         --secondary-foreground: 0 0% 98%;
 53 |         --muted: 0 0% 14.9%;
 54 |         --muted-foreground: 0 0% 63.9%;
 55 |         --accent: 0 0% 14.9%;
 56 |         --accent-foreground: 0 0% 98%;
 57 |         --destructive: 0 62.8% 30.6%;
 58 |         --destructive-foreground: 0 0% 98%;
 59 |         --border: 0 0% 14.9%;
 60 |         --input: 0 0% 14.9%;
 61 |         --ring: 0 0% 83.1%;
 62 |         --chart-1: 220 70% 50%;
 63 |         --chart-2: 160 60% 45%;
 64 |         --chart-3: 30 80% 55%;
 65 |         --chart-4: 280 65% 60%;
 66 |         --chart-5: 340 75% 55%;
 67 |         --color-1: 0 100% 63%;
 68 |         --color-2: 270 100% 63%;
 69 |         --color-3: 210 100% 63%;
 70 |         --color-4: 195 100% 63%;
 71 |         --color-5: 90 100% 63%;
 72 |     }
 73 | }
 74 | 
 75 | @layer base {
 76 |     * {
 77 |         @apply border-border;
 78 |     }
 79 | 
 80 |     body {
 81 |         @apply bg-background text-foreground;
 82 |         font-family: 'Nunito', serif;
 83 |     }
 84 | 
 85 |     html {
 86 |         scroll-behavior: smooth;
 87 |     }
 88 | }
 89 | 
 90 | @layer utilities {
 91 | 
 92 |     /* span.text-gradient */
 93 |     .gradient {
 94 |         @apply bg-gradient-to-r from-blue-500 via-purple-500 to-rose-500;
 95 |     }
 96 | 
 97 |     .gradient-text,
 98 |     .text-gradient {
 99 |         @apply bg-gradient-to-r from-blue-500 via-purple-500 to-rose-500 text-transparent bg-clip-text;
100 |     }
101 | 
102 |     .chat-gradient {
103 |         @apply from-blue-700 via-purple-700 to-rose-700 bg-no-repeat bg-center bg-fixed;
104 |         /* @apply from-fuchsia-600 to-blue-600 bg-no-repeat bg-center bg-fixed; */
105 |         /* @apply from-orange-500 via-red-600 to-purple-600 bg-no-repeat bg-center bg-fixed; */
106 |         /* @apply from-orange-500 via-red-600 to-purple-600 bg-no-repeat bg-center bg-fixed; */
107 |     }
108 | }
109 | 
110 | 
111 | @layer components {
112 | 
113 | 
114 | 
115 |     .pl {
116 |         display: block;
117 |         width: 6.25em;
118 |         height: 6.25em;
119 |     }
120 | 
121 |     .pl__ring,
122 |     .pl__ball {
123 |         animation: ring 2s ease-out infinite;
124 |     }
125 | 
126 |     .pl__ball {
127 |         animation-name: ball;
128 |     }
129 | 
130 | 
131 |     /* Animation */
132 |     @keyframes ring {
133 |         from {
134 |             stroke-dasharray: 0 257 0 0 1 0 0 258;
135 |         }
136 | 
137 |         25% {
138 |             stroke-dasharray: 0 0 0 0 257 0 258 0;
139 |         }
140 | 
141 |         50%,
142 |         to {
143 |             stroke-dasharray: 0 0 0 0 0 515 0 0;
144 |         }
145 |     }
146 | 
147 |     @keyframes ball {
148 | 
149 |         from,
150 |         50% {
151 |             animation-timing-function: ease-in;
152 |             stroke-dashoffset: 1;
153 |         }
154 | 
155 |         64% {
156 |             animation-timing-function: ease-in;
157 |             stroke-dashoffset: -109;
158 |         }
159 | 
160 |         78% {
161 |             animation-timing-function: ease-in;
162 |             stroke-dashoffset: -145;
163 |         }
164 | 
165 |         92% {
166 |             animation-timing-function: ease-in;
167 |             stroke-dashoffset: -157;
168 |         }
169 | 
170 |         57%,
171 |         71%,
172 |         85%,
173 |         99%,
174 |         to {
175 |             animation-timing-function: ease-out;
176 |             stroke-dashoffset: -163;
177 |         }
178 |     }
179 | }


--------------------------------------------------------------------------------
/src/components/ui/message-bubble.tsx:
--------------------------------------------------------------------------------
  1 | import React from 'react';
  2 | import { Message, User } from '../../types';
  3 | import { cn } from '../../lib/utils';
  4 | 
  5 | import Linkify from 'linkify-react';
  6 | import { Opts } from 'linkifyjs';
  7 | import countries from '../../data/country-data';
  8 | // import {
  9 | //     ContextMenu,
 10 | //     ContextMenuContent,
 11 | //     ContextMenuItem,
 12 | //     ContextMenuLabel,
 13 | //     ContextMenuSeparator,
 14 | //     ContextMenuShortcut,
 15 | //     ContextMenuTrigger,
 16 | // } from './context-menu';
 17 | // import { Copy } from 'lucide-react';
 18 | 
 19 | import emojiRegex from 'emoji-regex';
 20 | import { Filter } from 'bad-words';
 21 | import { useSettingsContext } from '@/context/settings-context';
 22 | import { format } from 'date-fns';
 23 | 
 24 | interface UserMessageProp extends Message {
 25 |     showName: boolean;
 26 |     isOwnMessage: boolean;
 27 | }
 28 | 
 29 | // interface UserContextMenuProps extends UserMessageProp {
 30 | //     children: React.ReactNode;
 31 | // }
 32 | 
 33 | const linkOptions: Opts = {
 34 |     attributes: {
 35 |         onClick: (e: React.MouseEvent<HTMLAnchorElement, MouseEvent>) => {
 36 |             if (!confirm('Are you sure you want to leave this page?')) e.preventDefault();
 37 |         },
 38 |     },
 39 |     target: '_blank',
 40 | };
 41 | 
 42 | const isOnlyEmoji = (text: string) => {
 43 |     const regex = emojiRegex();
 44 |     const matches = [...text.matchAll(regex)];
 45 |     return matches.length > 0 && matches.join('') === text;
 46 | };
 47 | 
 48 | const CountryFlag = ({ countryCode }: { countryCode: User['country'] }) => {
 49 |     const country = countries[countryCode] || countries?.['AC'];
 50 |     return country ? <img className="size-5 ml-0.5 -translate-y-[1px] inline" src={country.image} alt={country.name} /> : null;
 51 | };
 52 | 
 53 | // const UserContextMenu = ({ children, id, userName, userCountry, timestamp }: UserContextMenuProps) => (
 54 | //     <ContextMenu>
 55 | //         <ContextMenuTrigger asChild>{children}</ContextMenuTrigger>
 56 | //         <ContextMenuContent className="min-w-48">
 57 | //             <ContextMenuLabel className="text-ellipsis text-xs opacity-85">Id: {id}</ContextMenuLabel>
 58 | //             <ContextMenuLabel className="text-ellipsis text-xs opacity-85">User: {userName}</ContextMenuLabel>
 59 | //             <ContextMenuLabel className="text-ellipsis text-xs opacity-85">
 60 | //                 Country: {countries?.[userCountry]?.name} <CountryFlag countryCode={userCountry} />
 61 | //             </ContextMenuLabel>
 62 | //             <ContextMenuLabel className="text-ellipsis text-xs opacity-85">
 63 | //                 Time: {moment(timestamp?.toDate()).format('D MMM YY, hh:mm A')}
 64 | //             </ContextMenuLabel>
 65 | //             <ContextMenuSeparator />
 66 | //             <ContextMenuItem>
 67 | //                 Copy Message
 68 | //                 <ContextMenuShortcut>
 69 | //                     <Copy className="size-4" />
 70 | //                 </ContextMenuShortcut>
 71 | //             </ContextMenuItem>
 72 | //             <ContextMenuItem>
 73 | //                 Copy UserId
 74 | //                 <ContextMenuShortcut>
 75 | //                     <Copy className="size-4" />
 76 | //                 </ContextMenuShortcut>
 77 | //             </ContextMenuItem>
 78 | //         </ContextMenuContent>
 79 | //     </ContextMenu>
 80 | // );
 81 | 
 82 | const MessageBubble = (props: UserMessageProp) => {
 83 |     const { id, userName, userCountry, timestamp, content, showName, isOwnMessage } = props;
 84 |     const { settings } = useSettingsContext();
 85 |     const emojiOnly = isOnlyEmoji(content);
 86 |     const filter = new Filter();
 87 |     const filteredContent = settings.profanityFilter ? filter.clean(content) : content;
 88 | 
 89 |     const messageClass = cn(
 90 |         'bg-gradient-to-b px-2 rounded-xl min-w-28 max-w-[75%] md:max-w-[60%] w-fit shadow-md',
 91 |         showName && !isOwnMessage && 'rounded-tl-sm',
 92 |         isOwnMessage && 'ml-auto rounded-br-sm min-w-6',
 93 |         !isOwnMessage && 'border pt-1 pb-0.5 border-neutral-700/50 from-neutral-800/90 to-neutral-900/90 text-foreground/90',
 94 |         isOwnMessage && 'py-2 chat-gradient',
 95 |         emojiOnly && 'from-transparent to-transparent shadow-transparent border-none'
 96 |     );
 97 | 
 98 |     return (
 99 |         // <UserContextMenu key={id} {...props}>
100 |         <div key={id} className="overflow-hidden">
101 |             <div id={id}>
102 |                 {showName && !isOwnMessage && (
103 |                     <h4 className="mt-1.5 ml-0.5 text-muted-foreground text-xs capitalize w-fit">
104 |                         {userName} <CountryFlag countryCode={userCountry} />
105 |                     </h4>
106 |                 )}
107 |                 {isOwnMessage && showName && <p className="mt-2 w-fit"></p>}
108 |                 <div className={messageClass}>
109 |                     {emojiOnly ? (
110 |                         <p className="py-0.5">
111 |                             {/* @ts-ignore */}
112 |                             <em-emoji native={content} size="2.5rem" set="apple"></em-emoji>
113 |                         </p>
114 |                     ) : (
115 |                         <p className="text-sm text-foreground/80 [&_a]:text-orange-500 [&_a]:underline [&_a]:decoration-dotted [&_a]:underline-offset-4 overflow-hidden text-ellipsis break-words">
116 |                             <Linkify options={linkOptions}>{filteredContent}</Linkify>
117 |                         </p>
118 |                     )}
119 |                     {!isOwnMessage && (
120 |                         <p className="mt-0.5 text-muted-foreground text-[10px] text-right break-words">
121 |                             {format(timestamp?.toDate(), 'hh:mm a')}
122 |                         </p>
123 |                     )}
124 |                 </div>
125 |             </div>
126 |         </div>
127 | 
128 |         // </UserContextMenu>
129 |     );
130 | };
131 | 
132 | export default MessageBubble;
133 | 


--------------------------------------------------------------------------------
/src/hooks/useAuth.ts:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import Cookies from 'js-cookie';
  3 | import { collection, doc, getDocs, query, serverTimestamp, setDoc, where } from 'firebase/firestore';
  4 | import { ref, set, onDisconnect, serverTimestamp as serverTimestampRtdb } from 'firebase/database';
  5 | import { User } from '../types';
  6 | import { db, rtdb } from '../lib/firebase';
  7 | import toast from 'react-hot-toast';
  8 | 
  9 | const COOKIE_EXPIRY_DAYS = 30;
 10 | 
 11 | const getUserAgent = () => encodeURIComponent(navigator.userAgent);
 12 | 
 13 | const fetchCountryCode = async () => {
 14 |     try {
 15 |         const response = await fetch(`https://ipinfo.io/json?token=${import.meta.env.VITE_IPINFO_TOKEN}`);
 16 | 
 17 |         if (!response.ok) {
 18 |             toast.error('Unable to determine your location. This might be due to browser settings or permissions. Please try again');
 19 |             throw new Error('Failed to fetch country info');
 20 |         }
 21 | 
 22 |         const data: { country: string } = await response.json();
 23 |         return data.country as User['country'];
 24 |     } catch (error) {
 25 |         console.error('Error fetching country code:', error);
 26 |         return null;
 27 |     }
 28 | };
 29 | 
 30 | const useAuth = () => {
 31 |     const [user, setUser] = useState<User | null>(null);
 32 |     const [isLoading, setIsLoading] = useState<boolean>(true);
 33 |     const [isInitializing, setIsInitializing] = useState<boolean>(false);
 34 |     const [error, setError] = useState<string | null>(null);
 35 | 
 36 |     useEffect(() => {
 37 |         (async () => {
 38 |             if (navigator.cookieEnabled) {
 39 |                 const savedUserId = Cookies.get('userId');
 40 |                 const savedName = Cookies.get('userName');
 41 | 
 42 |                 if (savedUserId && savedName) await checkExistingUser(savedName);
 43 |             }
 44 |             setIsLoading(false);
 45 |         })();
 46 |     }, []);
 47 | 
 48 |     const updatePresence = (userId: string, userName: string) => {
 49 |         try {
 50 |             const userStatusRef = ref(rtdb, `userStatus/${userId}`);
 51 |             const typingStatusRef = ref(rtdb, `typingStatus/${userId}`);
 52 | 
 53 |             set(userStatusRef, {
 54 |                 name: userName,
 55 |                 isOnline: true,
 56 |                 updatedAt: serverTimestampRtdb(),
 57 |             });
 58 | 
 59 |             onDisconnect(userStatusRef).set({
 60 |                 name: userName,
 61 |                 isOnline: false,
 62 |                 updatedAt: serverTimestampRtdb(),
 63 |             });
 64 | 
 65 |             onDisconnect(typingStatusRef).set({
 66 |                 name: userName,
 67 |                 isTyping: false,
 68 |                 updatedAt: serverTimestampRtdb(),
 69 |             });
 70 |         } catch (error) {
 71 |             console.error('Error updating presence:', error);
 72 |             setError('Failed to update presence status');
 73 |         }
 74 |     };
 75 | 
 76 |     const checkExistingUser = async (name: string): Promise<User | null> => {
 77 |         setIsLoading(true);
 78 |         setError(null);
 79 | 
 80 |         try {
 81 |             console.log(`Checking existing user: ${name}`);
 82 |             const userAgent = getUserAgent();
 83 |             const userSnap = await getDocs(query(collection(db, 'users'), where('name', '==', name), where('userAgent', '==', userAgent)));
 84 | 
 85 |             if (!userSnap.empty) {
 86 |                 const existingUser = userSnap.docs[0].data() as User;
 87 |                 const userId = existingUser.id;
 88 | 
 89 |                 updatePresence(userId, name);
 90 |                 setUser(existingUser);
 91 |                 return existingUser;
 92 |             }
 93 | 
 94 |             return null;
 95 |         } catch (error) {
 96 |             console.error('Error checking existing user:', error);
 97 |             setError('Failed to check existing user');
 98 |             return null;
 99 |         } finally {
100 |             setIsLoading(false);
101 |         }
102 |     };
103 | 
104 |     const initializeUser = async (name: string): Promise<User | null> => {
105 |         setIsInitializing(true);
106 |         setError(null);
107 | 
108 |         try {
109 |             const existingUser = await checkExistingUser(name);
110 |             if (existingUser) {
111 |                 if (navigator.cookieEnabled) {
112 |                     Cookies.set('userId', existingUser.id, { expires: COOKIE_EXPIRY_DAYS });
113 |                     Cookies.set('userName', name, { expires: COOKIE_EXPIRY_DAYS });
114 |                 }
115 | 
116 |                 return existingUser;
117 |             }
118 | 
119 |             const userAgent = getUserAgent();
120 |             const userId = crypto.randomUUID();
121 |             const countryCode = await fetchCountryCode();
122 | 
123 |             const newUser: User = {
124 |                 id: userId,
125 |                 name,
126 |                 userAgent,
127 |                 country: countryCode as User['country'],
128 |                 createdAt: serverTimestamp(),
129 |             };
130 | 
131 |             await setDoc(doc(db, 'users', userId), newUser);
132 |             updatePresence(userId, name);
133 | 
134 |             if (navigator.cookieEnabled) {
135 |                 Cookies.set('userId', userId, { expires: COOKIE_EXPIRY_DAYS });
136 |                 Cookies.set('userName', name, { expires: COOKIE_EXPIRY_DAYS });
137 |             }
138 | 
139 |             setUser(newUser);
140 | 
141 |             return newUser;
142 |         } catch (error) {
143 |             console.error('Error initializing user:', error);
144 |             setError('Failed to initialize user');
145 |             return null;
146 |         } finally {
147 |             setIsInitializing(false);
148 |         }
149 |     };
150 | 
151 |     const logout = () => {
152 |         if (navigator.cookieEnabled) {
153 |             Cookies.remove('userId');
154 |             Cookies.remove('userName');
155 |         }
156 |         setUser(null);
157 |     };
158 | 
159 |     return { user, isLoading, isInitializing, error, initializeUser, logout };
160 | };
161 | 
162 | export default useAuth;


--------------------------------------------------------------------------------
/src/components/ui/context-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as ContextMenuPrimitive from "@radix-ui/react-context-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const ContextMenu = ContextMenuPrimitive.Root
  8 | 
  9 | const ContextMenuTrigger = ContextMenuPrimitive.Trigger
 10 | 
 11 | const ContextMenuGroup = ContextMenuPrimitive.Group
 12 | 
 13 | const ContextMenuPortal = ContextMenuPrimitive.Portal
 14 | 
 15 | const ContextMenuSub = ContextMenuPrimitive.Sub
 16 | 
 17 | const ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup
 18 | 
 19 | const ContextMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <ContextMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto h-4 w-4" />
 36 |   </ContextMenuPrimitive.SubTrigger>
 37 | ))
 38 | ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName
 39 | 
 40 | const ContextMenuSubContent = React.forwardRef<
 41 |   React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
 42 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>
 43 | >(({ className, ...props }, ref) => (
 44 |   <ContextMenuPrimitive.SubContent
 45 |     ref={ref}
 46 |     className={cn(
 47 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 48 |       className
 49 |     )}
 50 |     {...props}
 51 |   />
 52 | ))
 53 | ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName
 54 | 
 55 | const ContextMenuContent = React.forwardRef<
 56 |   React.ElementRef<typeof ContextMenuPrimitive.Content>,
 57 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>
 58 | >(({ className, ...props }, ref) => (
 59 |   <ContextMenuPrimitive.Portal>
 60 |     <ContextMenuPrimitive.Content
 61 |       ref={ref}
 62 |       className={cn(
 63 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 64 |         className
 65 |       )}
 66 |       {...props}
 67 |     />
 68 |   </ContextMenuPrimitive.Portal>
 69 | ))
 70 | ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName
 71 | 
 72 | const ContextMenuItem = React.forwardRef<
 73 |   React.ElementRef<typeof ContextMenuPrimitive.Item>,
 74 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item> & {
 75 |     inset?: boolean
 76 |   }
 77 | >(({ className, inset, ...props }, ref) => (
 78 |   <ContextMenuPrimitive.Item
 79 |     ref={ref}
 80 |     className={cn(
 81 |       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 82 |       inset && "pl-8",
 83 |       className
 84 |     )}
 85 |     {...props}
 86 |   />
 87 | ))
 88 | ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName
 89 | 
 90 | const ContextMenuCheckboxItem = React.forwardRef<
 91 |   React.ElementRef<typeof ContextMenuPrimitive.CheckboxItem>,
 92 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.CheckboxItem>
 93 | >(({ className, children, checked, ...props }, ref) => (
 94 |   <ContextMenuPrimitive.CheckboxItem
 95 |     ref={ref}
 96 |     className={cn(
 97 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
 98 |       className
 99 |     )}
100 |     checked={checked}
101 |     {...props}
102 |   >
103 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
104 |       <ContextMenuPrimitive.ItemIndicator>
105 |         <Check className="h-4 w-4" />
106 |       </ContextMenuPrimitive.ItemIndicator>
107 |     </span>
108 |     {children}
109 |   </ContextMenuPrimitive.CheckboxItem>
110 | ))
111 | ContextMenuCheckboxItem.displayName =
112 |   ContextMenuPrimitive.CheckboxItem.displayName
113 | 
114 | const ContextMenuRadioItem = React.forwardRef<
115 |   React.ElementRef<typeof ContextMenuPrimitive.RadioItem>,
116 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.RadioItem>
117 | >(({ className, children, ...props }, ref) => (
118 |   <ContextMenuPrimitive.RadioItem
119 |     ref={ref}
120 |     className={cn(
121 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
122 |       className
123 |     )}
124 |     {...props}
125 |   >
126 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
127 |       <ContextMenuPrimitive.ItemIndicator>
128 |         <Circle className="h-4 w-4 fill-current" />
129 |       </ContextMenuPrimitive.ItemIndicator>
130 |     </span>
131 |     {children}
132 |   </ContextMenuPrimitive.RadioItem>
133 | ))
134 | ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName
135 | 
136 | const ContextMenuLabel = React.forwardRef<
137 |   React.ElementRef<typeof ContextMenuPrimitive.Label>,
138 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label> & {
139 |     inset?: boolean
140 |   }
141 | >(({ className, inset, ...props }, ref) => (
142 |   <ContextMenuPrimitive.Label
143 |     ref={ref}
144 |     className={cn(
145 |       "px-2 py-1.5 text-sm font-semibold text-foreground",
146 |       inset && "pl-8",
147 |       className
148 |     )}
149 |     {...props}
150 |   />
151 | ))
152 | ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName
153 | 
154 | const ContextMenuSeparator = React.forwardRef<
155 |   React.ElementRef<typeof ContextMenuPrimitive.Separator>,
156 |   React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>
157 | >(({ className, ...props }, ref) => (
158 |   <ContextMenuPrimitive.Separator
159 |     ref={ref}
160 |     className={cn("-mx-1 my-1 h-px bg-border", className)}
161 |     {...props}
162 |   />
163 | ))
164 | ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName
165 | 
166 | const ContextMenuShortcut = ({
167 |   className,
168 |   ...props
169 | }: React.HTMLAttributes<HTMLSpanElement>) => {
170 |   return (
171 |     <span
172 |       className={cn(
173 |         "ml-auto text-xs tracking-widest text-muted-foreground",
174 |         className
175 |       )}
176 |       {...props}
177 |     />
178 |   )
179 | }
180 | ContextMenuShortcut.displayName = "ContextMenuShortcut"
181 | 
182 | export {
183 |   ContextMenu,
184 |   ContextMenuTrigger,
185 |   ContextMenuContent,
186 |   ContextMenuItem,
187 |   ContextMenuCheckboxItem,
188 |   ContextMenuRadioItem,
189 |   ContextMenuLabel,
190 |   ContextMenuSeparator,
191 |   ContextMenuShortcut,
192 |   ContextMenuGroup,
193 |   ContextMenuPortal,
194 |   ContextMenuSub,
195 |   ContextMenuSubContent,
196 |   ContextMenuSubTrigger,
197 |   ContextMenuRadioGroup,
198 | }
199 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing to Realtime Web Chatapp
  2 | 
  3 | First off, thanks for taking the time to contribute! ❤️
  4 | 
  5 | All types of contributions are encouraged and valued. See the [Table of Contents](#table-of-contents) for different ways to help and details about how this project handles them. Please make sure to read the relevant section before making your contribution. It will make it a lot easier for us maintainers and smooth out the experience for all involved. The community looks forward to your contributions. 🎉
  6 | 
  7 | > And if you like the project, but just don't have time to contribute, that's fine. There are other easy ways to support the project and show your appreciation, which we would also be very happy about:
  8 | > - Star the project
  9 | > - Tweet about it
 10 | > - Refer this project in your project's readme
 11 | > - Mention the project at local meetups and tell your friends/colleagues
 12 | 
 13 | ## Table of Contents
 14 | 
 15 | - [Code of Conduct](#code-of-conduct)
 16 | - [I Have a Question](#i-have-a-question)
 17 | - [I Want To Contribute](#i-want-to-contribute)
 18 | - [Reporting Bugs](#reporting-bugs)
 19 | - [Suggesting Enhancements](#suggesting-enhancements)
 20 | 
 21 | 
 22 | ## Code of Conduct
 23 | 
 24 | This project and everyone participating in it is governed by the
 25 | [Realtime Web Chatapp Code of Conduct](https://github.com/devXprite/Chat-Worldblob/master/CODE_OF_CONDUCT.md).
 26 | By participating, you are expected to uphold this code. Please report unacceptable behavior
 27 | to .
 28 | 
 29 | 
 30 | ## I Have a Question
 31 | 
 32 | > If you want to ask a question, we assume that you have read the available [Documentation](https://github.com/devXprite/Chat-World#readme).
 33 | 
 34 | Before you ask a question, it is best to search for existing [Issues](https://github.com/devXprite/Chat-World/issues) that might help you. In case you have found a suitable issue and still need clarification, you can write your question in this issue. It is also advisable to search the internet for answers first.
 35 | 
 36 | If you then still feel the need to ask a question and need clarification, we recommend the following:
 37 | 
 38 | - Open an [Issue](https://github.com/devXprite/Chat-World/issues/new).
 39 | - Provide as much context as you can about what you're running into.
 40 | - Provide project and platform versions (nodejs, npm, etc), depending on what seems relevant.
 41 | 
 42 | We will then take care of the issue as soon as possible.
 43 | 
 44 | 
 45 | ## I Want To Contribute
 46 | 
 47 | > ### Legal Notice
 48 | > When contributing to this project, you must agree that you have authored 100% of the content, that you have the necessary rights to the content and that the content you contribute may be provided under the project license.
 49 | 
 50 | ### Reporting Bugs
 51 | 
 52 | #### Before Submitting a Bug Report
 53 | 
 54 | A good bug report shouldn't leave others needing to chase you up for more information. Therefore, we ask you to investigate carefully, collect information and describe the issue in detail in your report. Please complete the following steps in advance to help us fix any potential bug as fast as possible.
 55 | 
 56 | - Make sure that you are using the latest version.
 57 | - Determine if your bug is really a bug and not an error on your side e.g. using incompatible environment components/versions (Make sure that you have read the [documentation](https://github.com/devXprite/Chat-World#readme). If you are looking for support, you might want to check [this section](#i-have-a-question)).
 58 | - To see if other users have experienced (and potentially already solved) the same issue you are having, check if there is not already a bug report existing for your bug or error in the [bug tracker](https://github.com/devXprite/Chat-Worldissues?q=label%3Abug).
 59 | - Also make sure to search the internet (including Stack Overflow) to see if users outside of the GitHub community have discussed the issue.
 60 | - Collect information about the bug:
 61 | - Stack trace (Traceback)
 62 | - OS, Platform and Version (Windows, Linux, macOS, x86, ARM)
 63 | - Version of the interpreter, compiler, SDK, runtime environment, package manager, depending on what seems relevant.
 64 | - Possibly your input and the output
 65 | - Can you reliably reproduce the issue? And can you also reproduce it with older versions?
 66 | 
 67 | #### How Do I Submit a Good Bug Report?
 68 | 
 69 | > You must never report security related issues, vulnerabilities or bugs including sensitive information to the issue tracker, or elsewhere in public. Instead sensitive bugs must be sent by email to .
 70 | 
 71 | We use GitHub issues to track bugs and errors. If you run into an issue with the project:
 72 | 
 73 | - Open an [Issue](https://github.com/devXprite/Chat-World/issues/new). (Since we can't be sure at this point whether it is a bug or not, we ask you not to talk about a bug yet and not to label the issue.)
 74 | - Explain the behavior you would expect and the actual behavior.
 75 | - Please provide as much context as possible and describe the *reproduction steps* that someone else can follow to recreate the issue on their own. This usually includes your code. For good bug reports you should isolate the problem and create a reduced test case.
 76 | - Provide the information you collected in the previous section.
 77 | 
 78 | Once it's filed:
 79 | 
 80 | - The project team will label the issue accordingly.
 81 | - A team member will try to reproduce the issue with your provided steps. If there are no reproduction steps or no obvious way to reproduce the issue, the team will ask you for those steps and mark the issue as `needs-repro`. Bugs with the `needs-repro` tag will not be addressed until they are reproduced.
 82 | - If the team is able to reproduce the issue, it will be marked `needs-fix`, as well as possibly other tags (such as `critical`), and the issue will be left to be [implemented by someone](#your-first-code-contribution).
 83 | 
 84 | ### Suggesting Enhancements
 85 | 
 86 | This section guides you through submitting an enhancement suggestion for Realtime Web Chatapp, **including completely new features and minor improvements to existing functionality**. Following these guidelines will help maintainers and the community to understand your suggestion and find related suggestions.
 87 | 
 88 | #### Before Submitting an Enhancement
 89 | 
 90 | - Make sure that you are using the latest version.
 91 | - Read the [documentation](https://github.com/devXprite/Chat-World#readme) carefully and find out if the functionality is already covered, maybe by an individual configuration.
 92 | - Perform a [search](https://github.com/devXprite/Chat-World/issues) to see if the enhancement has already been suggested. If it has, add a comment to the existing issue instead of opening a new one.
 93 | - Find out whether your idea fits with the scope and aims of the project. It's up to you to make a strong case to convince the project's developers of the merits of this feature. Keep in mind that we want features that will be useful to the majority of our users and not just a small subset. If you're just targeting a minority of users, consider writing an add-on/plugin library.
 94 | 
 95 | #### How Do I Submit a Good Enhancement Suggestion?
 96 | 
 97 | Enhancement suggestions are tracked as [GitHub issues](https://github.com/devXprite/Chat-World/issues).
 98 | 
 99 | - Use a **clear and descriptive title** for the issue to identify the suggestion.
100 | - Provide a **step-by-step description of the suggested enhancement** in as many details as possible.
101 | - **Describe the current behavior** and **explain which behavior you expected to see instead** and why. At this point you can also tell which alternatives do not work for you.
102 | - You may want to **include screenshots and animated GIFs** which help you demonstrate the steps or point out the part which the suggestion is related to. You can use [this tool](https://www.cockos.com/licecap/) to record GIFs on macOS and Windows, and [this tool](https://github.com/colinkeenan/silentcast) or [this tool](https://github.com/GNOME/byzanz) on Linux. <!-- this should only be included if the project has a GUI -->
103 | - **Explain why this enhancement would be useful** to most Realtime Web Chatapp users. You may also want to point out the other projects that solved it better and which could serve as inspiration.


--------------------------------------------------------------------------------
/src/components/ui/dropdown-menu.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from "react"
  2 | import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
  3 | import { Check, ChevronRight, Circle } from "lucide-react"
  4 | 
  5 | import { cn } from "@/lib/utils"
  6 | 
  7 | const DropdownMenu = DropdownMenuPrimitive.Root
  8 | 
  9 | const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
 10 | 
 11 | const DropdownMenuGroup = DropdownMenuPrimitive.Group
 12 | 
 13 | const DropdownMenuPortal = DropdownMenuPrimitive.Portal
 14 | 
 15 | const DropdownMenuSub = DropdownMenuPrimitive.Sub
 16 | 
 17 | const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 18 | 
 19 | const DropdownMenuSubTrigger = React.forwardRef<
 20 |   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
 21 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
 22 |     inset?: boolean
 23 |   }
 24 | >(({ className, inset, children, ...props }, ref) => (
 25 |   <DropdownMenuPrimitive.SubTrigger
 26 |     ref={ref}
 27 |     className={cn(
 28 |       "flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
 29 |       inset && "pl-8",
 30 |       className
 31 |     )}
 32 |     {...props}
 33 |   >
 34 |     {children}
 35 |     <ChevronRight className="ml-auto" />
 36 |   </DropdownMenuPrimitive.SubTrigger>
 37 | ))
 38 | DropdownMenuSubTrigger.displayName =
 39 |   DropdownMenuPrimitive.SubTrigger.displayName
 40 | 
 41 | const DropdownMenuSubContent = React.forwardRef<
 42 |   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
 43 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
 44 | >(({ className, ...props }, ref) => (
 45 |   <DropdownMenuPrimitive.SubContent
 46 |     ref={ref}
 47 |     className={cn(
 48 |       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 49 |       className
 50 |     )}
 51 |     {...props}
 52 |   />
 53 | ))
 54 | DropdownMenuSubContent.displayName =
 55 |   DropdownMenuPrimitive.SubContent.displayName
 56 | 
 57 | const DropdownMenuContent = React.forwardRef<
 58 |   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
 59 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
 60 | >(({ className, sideOffset = 4, ...props }, ref) => (
 61 |   <DropdownMenuPrimitive.Portal>
 62 |     <DropdownMenuPrimitive.Content
 63 |       ref={ref}
 64 |       sideOffset={sideOffset}
 65 |       className={cn(
 66 |         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md",
 67 |         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
 68 |         className
 69 |       )}
 70 |       {...props}
 71 |     />
 72 |   </DropdownMenuPrimitive.Portal>
 73 | ))
 74 | DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 75 | 
 76 | const DropdownMenuItem = React.forwardRef<
 77 |   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
 78 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
 79 |     inset?: boolean
 80 |   }
 81 | >(({ className, inset, ...props }, ref) => (
 82 |   <DropdownMenuPrimitive.Item
 83 |     ref={ref}
 84 |     className={cn(
 85 |       "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&>svg]:size-4 [&>svg]:shrink-0",
 86 |       inset && "pl-8",
 87 |       className
 88 |     )}
 89 |     {...props}
 90 |   />
 91 | ))
 92 | DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 93 | 
 94 | const DropdownMenuCheckboxItem = React.forwardRef<
 95 |   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
 96 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
 97 | >(({ className, children, checked, ...props }, ref) => (
 98 |   <DropdownMenuPrimitive.CheckboxItem
 99 |     ref={ref}
100 |     className={cn(
101 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
102 |       className
103 |     )}
104 |     checked={checked}
105 |     {...props}
106 |   >
107 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
108 |       <DropdownMenuPrimitive.ItemIndicator>
109 |         <Check className="h-4 w-4" />
110 |       </DropdownMenuPrimitive.ItemIndicator>
111 |     </span>
112 |     {children}
113 |   </DropdownMenuPrimitive.CheckboxItem>
114 | ))
115 | DropdownMenuCheckboxItem.displayName =
116 |   DropdownMenuPrimitive.CheckboxItem.displayName
117 | 
118 | const DropdownMenuRadioItem = React.forwardRef<
119 |   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
120 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
121 | >(({ className, children, ...props }, ref) => (
122 |   <DropdownMenuPrimitive.RadioItem
123 |     ref={ref}
124 |     className={cn(
125 |       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
126 |       className
127 |     )}
128 |     {...props}
129 |   >
130 |     <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
131 |       <DropdownMenuPrimitive.ItemIndicator>
132 |         <Circle className="h-2 w-2 fill-current" />
133 |       </DropdownMenuPrimitive.ItemIndicator>
134 |     </span>
135 |     {children}
136 |   </DropdownMenuPrimitive.RadioItem>
137 | ))
138 | DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
139 | 
140 | const DropdownMenuLabel = React.forwardRef<
141 |   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
142 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
143 |     inset?: boolean
144 |   }
145 | >(({ className, inset, ...props }, ref) => (
146 |   <DropdownMenuPrimitive.Label
147 |     ref={ref}
148 |     className={cn(
149 |       "px-2 py-1.5 text-sm font-semibold",
150 |       inset && "pl-8",
151 |       className
152 |     )}
153 |     {...props}
154 |   />
155 | ))
156 | DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
157 | 
158 | const DropdownMenuSeparator = React.forwardRef<
159 |   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
160 |   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
161 | >(({ className, ...props }, ref) => (
162 |   <DropdownMenuPrimitive.Separator
163 |     ref={ref}
164 |     className={cn("-mx-1 my-1 h-px bg-muted", className)}
165 |     {...props}
166 |   />
167 | ))
168 | DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
169 | 
170 | const DropdownMenuShortcut = ({
171 |   className,
172 |   ...props
173 | }: React.HTMLAttributes<HTMLSpanElement>) => {
174 |   return (
175 |     <span
176 |       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
177 |       {...props}
178 |     />
179 |   )
180 | }
181 | DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
182 | 
183 | export {
184 |   DropdownMenu,
185 |   DropdownMenuTrigger,
186 |   DropdownMenuContent,
187 |   DropdownMenuItem,
188 |   DropdownMenuCheckboxItem,
189 |   DropdownMenuRadioItem,
190 |   DropdownMenuLabel,
191 |   DropdownMenuSeparator,
192 |   DropdownMenuShortcut,
193 |   DropdownMenuGroup,
194 |   DropdownMenuPortal,
195 |   DropdownMenuSub,
196 |   DropdownMenuSubContent,
197 |   DropdownMenuSubTrigger,
198 |   DropdownMenuRadioGroup,
199 | }
200 | 


--------------------------------------------------------------------------------
/src/data/country-data.ts:
--------------------------------------------------------------------------------
   1 | const countries = {
   2 |     AC: {
   3 |         name: 'Ascension Island',
   4 |         emoji: '🇦🇨',
   5 |         unicode: 'U+1F1E6 U+1F1E8',
   6 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AC.svg',
   7 |     },
   8 |     AD: {
   9 |         name: 'Andorra',
  10 |         emoji: '🇦🇩',
  11 |         unicode: 'U+1F1E6 U+1F1E9',
  12 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AD.svg',
  13 |     },
  14 |     AE: {
  15 |         name: 'United Arab Emirates',
  16 |         emoji: '🇦🇪',
  17 |         unicode: 'U+1F1E6 U+1F1EA',
  18 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AE.svg',
  19 |     },
  20 |     AF: {
  21 |         name: 'Afghanistan',
  22 |         emoji: '🇦🇫',
  23 |         unicode: 'U+1F1E6 U+1F1EB',
  24 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AF.svg',
  25 |     },
  26 |     AG: {
  27 |         name: 'Antigua & Barbuda',
  28 |         emoji: '🇦🇬',
  29 |         unicode: 'U+1F1E6 U+1F1EC',
  30 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AG.svg',
  31 |     },
  32 |     AI: {
  33 |         name: 'Anguilla',
  34 |         emoji: '🇦🇮',
  35 |         unicode: 'U+1F1E6 U+1F1EE',
  36 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AI.svg',
  37 |     },
  38 |     AL: {
  39 |         name: 'Albania',
  40 |         emoji: '🇦🇱',
  41 |         unicode: 'U+1F1E6 U+1F1F1',
  42 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AL.svg',
  43 |     },
  44 |     AM: {
  45 |         name: 'Armenia',
  46 |         emoji: '🇦🇲',
  47 |         unicode: 'U+1F1E6 U+1F1F2',
  48 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AM.svg',
  49 |     },
  50 |     AO: {
  51 |         name: 'Angola',
  52 |         emoji: '🇦🇴',
  53 |         unicode: 'U+1F1E6 U+1F1F4',
  54 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AO.svg',
  55 |     },
  56 |     AQ: {
  57 |         name: 'Antarctica',
  58 |         emoji: '🇦🇶',
  59 |         unicode: 'U+1F1E6 U+1F1F6',
  60 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AQ.svg',
  61 |     },
  62 |     AR: {
  63 |         name: 'Argentina',
  64 |         emoji: '🇦🇷',
  65 |         unicode: 'U+1F1E6 U+1F1F7',
  66 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AR.svg',
  67 |     },
  68 |     AS: {
  69 |         name: 'American Samoa',
  70 |         emoji: '🇦🇸',
  71 |         unicode: 'U+1F1E6 U+1F1F8',
  72 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AS.svg',
  73 |     },
  74 |     AT: {
  75 |         name: 'Austria',
  76 |         emoji: '🇦🇹',
  77 |         unicode: 'U+1F1E6 U+1F1F9',
  78 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AT.svg',
  79 |     },
  80 |     AU: {
  81 |         name: 'Australia',
  82 |         emoji: '🇦🇺',
  83 |         unicode: 'U+1F1E6 U+1F1FA',
  84 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AU.svg',
  85 |     },
  86 |     AW: {
  87 |         name: 'Aruba',
  88 |         emoji: '🇦🇼',
  89 |         unicode: 'U+1F1E6 U+1F1FC',
  90 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AW.svg',
  91 |     },
  92 |     AX: {
  93 |         name: 'Åland Islands',
  94 |         emoji: '🇦🇽',
  95 |         unicode: 'U+1F1E6 U+1F1FD',
  96 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AX.svg',
  97 |     },
  98 |     AZ: {
  99 |         name: 'Azerbaijan',
 100 |         emoji: '🇦🇿',
 101 |         unicode: 'U+1F1E6 U+1F1FF',
 102 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/AZ.svg',
 103 |     },
 104 |     BA: {
 105 |         name: 'Bosnia & Herzegovina',
 106 |         emoji: '🇧🇦',
 107 |         unicode: 'U+1F1E7 U+1F1E6',
 108 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BA.svg',
 109 |     },
 110 |     BB: {
 111 |         name: 'Barbados',
 112 |         emoji: '🇧🇧',
 113 |         unicode: 'U+1F1E7 U+1F1E7',
 114 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BB.svg',
 115 |     },
 116 |     BD: {
 117 |         name: 'Bangladesh',
 118 |         emoji: '🇧🇩',
 119 |         unicode: 'U+1F1E7 U+1F1E9',
 120 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BD.svg',
 121 |     },
 122 |     BE: {
 123 |         name: 'Belgium',
 124 |         emoji: '🇧🇪',
 125 |         unicode: 'U+1F1E7 U+1F1EA',
 126 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BE.svg',
 127 |     },
 128 |     BF: {
 129 |         name: 'Burkina Faso',
 130 |         emoji: '🇧🇫',
 131 |         unicode: 'U+1F1E7 U+1F1EB',
 132 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BF.svg',
 133 |     },
 134 |     BG: {
 135 |         name: 'Bulgaria',
 136 |         emoji: '🇧🇬',
 137 |         unicode: 'U+1F1E7 U+1F1EC',
 138 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BG.svg',
 139 |     },
 140 |     BH: {
 141 |         name: 'Bahrain',
 142 |         emoji: '🇧🇭',
 143 |         unicode: 'U+1F1E7 U+1F1ED',
 144 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BH.svg',
 145 |     },
 146 |     BI: {
 147 |         name: 'Burundi',
 148 |         emoji: '🇧🇮',
 149 |         unicode: 'U+1F1E7 U+1F1EE',
 150 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BI.svg',
 151 |     },
 152 |     BJ: {
 153 |         name: 'Benin',
 154 |         emoji: '🇧🇯',
 155 |         unicode: 'U+1F1E7 U+1F1EF',
 156 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BJ.svg',
 157 |     },
 158 |     BL: {
 159 |         name: 'St. Barthélemy',
 160 |         emoji: '🇧🇱',
 161 |         unicode: 'U+1F1E7 U+1F1F1',
 162 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BL.svg',
 163 |     },
 164 |     BM: {
 165 |         name: 'Bermuda',
 166 |         emoji: '🇧🇲',
 167 |         unicode: 'U+1F1E7 U+1F1F2',
 168 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BM.svg',
 169 |     },
 170 |     BN: {
 171 |         name: 'Brunei',
 172 |         emoji: '🇧🇳',
 173 |         unicode: 'U+1F1E7 U+1F1F3',
 174 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BN.svg',
 175 |     },
 176 |     BO: {
 177 |         name: 'Bolivia',
 178 |         emoji: '🇧🇴',
 179 |         unicode: 'U+1F1E7 U+1F1F4',
 180 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BO.svg',
 181 |     },
 182 |     BQ: {
 183 |         name: 'Caribbean Netherlands',
 184 |         emoji: '🇧🇶',
 185 |         unicode: 'U+1F1E7 U+1F1F6',
 186 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BQ.svg',
 187 |     },
 188 |     BR: {
 189 |         name: 'Brazil',
 190 |         emoji: '🇧🇷',
 191 |         unicode: 'U+1F1E7 U+1F1F7',
 192 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BR.svg',
 193 |     },
 194 |     BS: {
 195 |         name: 'Bahamas',
 196 |         emoji: '🇧🇸',
 197 |         unicode: 'U+1F1E7 U+1F1F8',
 198 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BS.svg',
 199 |     },
 200 |     BT: {
 201 |         name: 'Bhutan',
 202 |         emoji: '🇧🇹',
 203 |         unicode: 'U+1F1E7 U+1F1F9',
 204 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BT.svg',
 205 |     },
 206 |     BV: {
 207 |         name: 'Bouvet Island',
 208 |         emoji: '🇧🇻',
 209 |         unicode: 'U+1F1E7 U+1F1FB',
 210 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BV.svg',
 211 |     },
 212 |     BW: {
 213 |         name: 'Botswana',
 214 |         emoji: '🇧🇼',
 215 |         unicode: 'U+1F1E7 U+1F1FC',
 216 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BW.svg',
 217 |     },
 218 |     BY: {
 219 |         name: 'Belarus',
 220 |         emoji: '🇧🇾',
 221 |         unicode: 'U+1F1E7 U+1F1FE',
 222 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BY.svg',
 223 |     },
 224 |     BZ: {
 225 |         name: 'Belize',
 226 |         emoji: '🇧🇿',
 227 |         unicode: 'U+1F1E7 U+1F1FF',
 228 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/BZ.svg',
 229 |     },
 230 |     CA: {
 231 |         name: 'Canada',
 232 |         emoji: '🇨🇦',
 233 |         unicode: 'U+1F1E8 U+1F1E6',
 234 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CA.svg',
 235 |     },
 236 |     CC: {
 237 |         name: 'Cocos (Keeling) Islands',
 238 |         emoji: '🇨🇨',
 239 |         unicode: 'U+1F1E8 U+1F1E8',
 240 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CC.svg',
 241 |     },
 242 |     CD: {
 243 |         name: 'Congo - Kinshasa',
 244 |         emoji: '🇨🇩',
 245 |         unicode: 'U+1F1E8 U+1F1E9',
 246 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CD.svg',
 247 |     },
 248 |     CF: {
 249 |         name: 'Central African Republic',
 250 |         emoji: '🇨🇫',
 251 |         unicode: 'U+1F1E8 U+1F1EB',
 252 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CF.svg',
 253 |     },
 254 |     CG: {
 255 |         name: 'Congo - Brazzaville',
 256 |         emoji: '🇨🇬',
 257 |         unicode: 'U+1F1E8 U+1F1EC',
 258 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CG.svg',
 259 |     },
 260 |     CH: {
 261 |         name: 'Switzerland',
 262 |         emoji: '🇨🇭',
 263 |         unicode: 'U+1F1E8 U+1F1ED',
 264 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CH.svg',
 265 |     },
 266 |     CI: {
 267 |         name: 'Côte d’Ivoire',
 268 |         emoji: '🇨🇮',
 269 |         unicode: 'U+1F1E8 U+1F1EE',
 270 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CI.svg',
 271 |     },
 272 |     CK: {
 273 |         name: 'Cook Islands',
 274 |         emoji: '🇨🇰',
 275 |         unicode: 'U+1F1E8 U+1F1F0',
 276 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CK.svg',
 277 |     },
 278 |     CL: {
 279 |         name: 'Chile',
 280 |         emoji: '🇨🇱',
 281 |         unicode: 'U+1F1E8 U+1F1F1',
 282 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CL.svg',
 283 |     },
 284 |     CM: {
 285 |         name: 'Cameroon',
 286 |         emoji: '🇨🇲',
 287 |         unicode: 'U+1F1E8 U+1F1F2',
 288 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CM.svg',
 289 |     },
 290 |     CN: {
 291 |         name: 'China',
 292 |         emoji: '🇨🇳',
 293 |         unicode: 'U+1F1E8 U+1F1F3',
 294 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CN.svg',
 295 |     },
 296 |     CO: {
 297 |         name: 'Colombia',
 298 |         emoji: '🇨🇴',
 299 |         unicode: 'U+1F1E8 U+1F1F4',
 300 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CO.svg',
 301 |     },
 302 |     CP: {
 303 |         name: 'Clipperton Island',
 304 |         emoji: '🇨🇵',
 305 |         unicode: 'U+1F1E8 U+1F1F5',
 306 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CP.svg',
 307 |     },
 308 |     CR: {
 309 |         name: 'Costa Rica',
 310 |         emoji: '🇨🇷',
 311 |         unicode: 'U+1F1E8 U+1F1F7',
 312 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CR.svg',
 313 |     },
 314 |     CU: {
 315 |         name: 'Cuba',
 316 |         emoji: '🇨🇺',
 317 |         unicode: 'U+1F1E8 U+1F1FA',
 318 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CU.svg',
 319 |     },
 320 |     CV: {
 321 |         name: 'Cape Verde',
 322 |         emoji: '🇨🇻',
 323 |         unicode: 'U+1F1E8 U+1F1FB',
 324 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CV.svg',
 325 |     },
 326 |     CW: {
 327 |         name: 'Curaçao',
 328 |         emoji: '🇨🇼',
 329 |         unicode: 'U+1F1E8 U+1F1FC',
 330 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CW.svg',
 331 |     },
 332 |     CX: {
 333 |         name: 'Christmas Island',
 334 |         emoji: '🇨🇽',
 335 |         unicode: 'U+1F1E8 U+1F1FD',
 336 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CX.svg',
 337 |     },
 338 |     CY: {
 339 |         name: 'Cyprus',
 340 |         emoji: '🇨🇾',
 341 |         unicode: 'U+1F1E8 U+1F1FE',
 342 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CY.svg',
 343 |     },
 344 |     CZ: {
 345 |         name: 'Czechia',
 346 |         emoji: '🇨🇿',
 347 |         unicode: 'U+1F1E8 U+1F1FF',
 348 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/CZ.svg',
 349 |     },
 350 |     DE: {
 351 |         name: 'Germany',
 352 |         emoji: '🇩🇪',
 353 |         unicode: 'U+1F1E9 U+1F1EA',
 354 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DE.svg',
 355 |     },
 356 |     DG: {
 357 |         name: 'Diego Garcia',
 358 |         emoji: '🇩🇬',
 359 |         unicode: 'U+1F1E9 U+1F1EC',
 360 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DG.svg',
 361 |     },
 362 |     DJ: {
 363 |         name: 'Djibouti',
 364 |         emoji: '🇩🇯',
 365 |         unicode: 'U+1F1E9 U+1F1EF',
 366 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DJ.svg',
 367 |     },
 368 |     DK: {
 369 |         name: 'Denmark',
 370 |         emoji: '🇩🇰',
 371 |         unicode: 'U+1F1E9 U+1F1F0',
 372 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DK.svg',
 373 |     },
 374 |     DM: {
 375 |         name: 'Dominica',
 376 |         emoji: '🇩🇲',
 377 |         unicode: 'U+1F1E9 U+1F1F2',
 378 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DM.svg',
 379 |     },
 380 |     DO: {
 381 |         name: 'Dominican Republic',
 382 |         emoji: '🇩🇴',
 383 |         unicode: 'U+1F1E9 U+1F1F4',
 384 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DO.svg',
 385 |     },
 386 |     DZ: {
 387 |         name: 'Algeria',
 388 |         emoji: '🇩🇿',
 389 |         unicode: 'U+1F1E9 U+1F1FF',
 390 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/DZ.svg',
 391 |     },
 392 |     EA: {
 393 |         name: 'Ceuta & Melilla',
 394 |         emoji: '🇪🇦',
 395 |         unicode: 'U+1F1EA U+1F1E6',
 396 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EA.svg',
 397 |     },
 398 |     EC: {
 399 |         name: 'Ecuador',
 400 |         emoji: '🇪🇨',
 401 |         unicode: 'U+1F1EA U+1F1E8',
 402 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EC.svg',
 403 |     },
 404 |     EE: {
 405 |         name: 'Estonia',
 406 |         emoji: '🇪🇪',
 407 |         unicode: 'U+1F1EA U+1F1EA',
 408 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EE.svg',
 409 |     },
 410 |     EG: {
 411 |         name: 'Egypt',
 412 |         emoji: '🇪🇬',
 413 |         unicode: 'U+1F1EA U+1F1EC',
 414 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EG.svg',
 415 |     },
 416 |     EH: {
 417 |         name: 'Western Sahara',
 418 |         emoji: '🇪🇭',
 419 |         unicode: 'U+1F1EA U+1F1ED',
 420 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EH.svg',
 421 |     },
 422 |     ER: {
 423 |         name: 'Eritrea',
 424 |         emoji: '🇪🇷',
 425 |         unicode: 'U+1F1EA U+1F1F7',
 426 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ER.svg',
 427 |     },
 428 |     ES: {
 429 |         name: 'Spain',
 430 |         emoji: '🇪🇸',
 431 |         unicode: 'U+1F1EA U+1F1F8',
 432 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ES.svg',
 433 |     },
 434 |     ET: {
 435 |         name: 'Ethiopia',
 436 |         emoji: '🇪🇹',
 437 |         unicode: 'U+1F1EA U+1F1F9',
 438 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ET.svg',
 439 |     },
 440 |     EU: {
 441 |         name: 'European Union',
 442 |         emoji: '🇪🇺',
 443 |         unicode: 'U+1F1EA U+1F1FA',
 444 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/EU.svg',
 445 |     },
 446 |     FI: {
 447 |         name: 'Finland',
 448 |         emoji: '🇫🇮',
 449 |         unicode: 'U+1F1EB U+1F1EE',
 450 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FI.svg',
 451 |     },
 452 |     FJ: {
 453 |         name: 'Fiji',
 454 |         emoji: '🇫🇯',
 455 |         unicode: 'U+1F1EB U+1F1EF',
 456 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FJ.svg',
 457 |     },
 458 |     FK: {
 459 |         name: 'Falkland Islands',
 460 |         emoji: '🇫🇰',
 461 |         unicode: 'U+1F1EB U+1F1F0',
 462 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FK.svg',
 463 |     },
 464 |     FM: {
 465 |         name: 'Micronesia',
 466 |         emoji: '🇫🇲',
 467 |         unicode: 'U+1F1EB U+1F1F2',
 468 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FM.svg',
 469 |     },
 470 |     FO: {
 471 |         name: 'Faroe Islands',
 472 |         emoji: '🇫🇴',
 473 |         unicode: 'U+1F1EB U+1F1F4',
 474 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FO.svg',
 475 |     },
 476 |     FR: {
 477 |         name: 'France',
 478 |         emoji: '🇫🇷',
 479 |         unicode: 'U+1F1EB U+1F1F7',
 480 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/FR.svg',
 481 |     },
 482 |     GA: {
 483 |         name: 'Gabon',
 484 |         emoji: '🇬🇦',
 485 |         unicode: 'U+1F1EC U+1F1E6',
 486 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GA.svg',
 487 |     },
 488 |     GB: {
 489 |         name: 'United Kingdom',
 490 |         emoji: '🇬🇧',
 491 |         unicode: 'U+1F1EC U+1F1E7',
 492 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GB.svg',
 493 |     },
 494 |     GD: {
 495 |         name: 'Grenada',
 496 |         emoji: '🇬🇩',
 497 |         unicode: 'U+1F1EC U+1F1E9',
 498 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GD.svg',
 499 |     },
 500 |     GE: {
 501 |         name: 'Georgia',
 502 |         emoji: '🇬🇪',
 503 |         unicode: 'U+1F1EC U+1F1EA',
 504 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GE.svg',
 505 |     },
 506 |     GF: {
 507 |         name: 'French Guiana',
 508 |         emoji: '🇬🇫',
 509 |         unicode: 'U+1F1EC U+1F1EB',
 510 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GF.svg',
 511 |     },
 512 |     GG: {
 513 |         name: 'Guernsey',
 514 |         emoji: '🇬🇬',
 515 |         unicode: 'U+1F1EC U+1F1EC',
 516 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GG.svg',
 517 |     },
 518 |     GH: {
 519 |         name: 'Ghana',
 520 |         emoji: '🇬🇭',
 521 |         unicode: 'U+1F1EC U+1F1ED',
 522 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GH.svg',
 523 |     },
 524 |     GI: {
 525 |         name: 'Gibraltar',
 526 |         emoji: '🇬🇮',
 527 |         unicode: 'U+1F1EC U+1F1EE',
 528 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GI.svg',
 529 |     },
 530 |     GL: {
 531 |         name: 'Greenland',
 532 |         emoji: '🇬🇱',
 533 |         unicode: 'U+1F1EC U+1F1F1',
 534 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GL.svg',
 535 |     },
 536 |     GM: {
 537 |         name: 'Gambia',
 538 |         emoji: '🇬🇲',
 539 |         unicode: 'U+1F1EC U+1F1F2',
 540 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GM.svg',
 541 |     },
 542 |     GN: {
 543 |         name: 'Guinea',
 544 |         emoji: '🇬🇳',
 545 |         unicode: 'U+1F1EC U+1F1F3',
 546 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GN.svg',
 547 |     },
 548 |     GP: {
 549 |         name: 'Guadeloupe',
 550 |         emoji: '🇬🇵',
 551 |         unicode: 'U+1F1EC U+1F1F5',
 552 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GP.svg',
 553 |     },
 554 |     GQ: {
 555 |         name: 'Equatorial Guinea',
 556 |         emoji: '🇬🇶',
 557 |         unicode: 'U+1F1EC U+1F1F6',
 558 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GQ.svg',
 559 |     },
 560 |     GR: {
 561 |         name: 'Greece',
 562 |         emoji: '🇬🇷',
 563 |         unicode: 'U+1F1EC U+1F1F7',
 564 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GR.svg',
 565 |     },
 566 |     GS: {
 567 |         name: 'South Georgia & South Sandwich Islands',
 568 |         emoji: '🇬🇸',
 569 |         unicode: 'U+1F1EC U+1F1F8',
 570 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GS.svg',
 571 |     },
 572 |     GT: {
 573 |         name: 'Guatemala',
 574 |         emoji: '🇬🇹',
 575 |         unicode: 'U+1F1EC U+1F1F9',
 576 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GT.svg',
 577 |     },
 578 |     GU: {
 579 |         name: 'Guam',
 580 |         emoji: '🇬🇺',
 581 |         unicode: 'U+1F1EC U+1F1FA',
 582 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GU.svg',
 583 |     },
 584 |     GW: {
 585 |         name: 'Guinea-Bissau',
 586 |         emoji: '🇬🇼',
 587 |         unicode: 'U+1F1EC U+1F1FC',
 588 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GW.svg',
 589 |     },
 590 |     GY: {
 591 |         name: 'Guyana',
 592 |         emoji: '🇬🇾',
 593 |         unicode: 'U+1F1EC U+1F1FE',
 594 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/GY.svg',
 595 |     },
 596 |     HK: {
 597 |         name: 'Hong Kong SAR China',
 598 |         emoji: '🇭🇰',
 599 |         unicode: 'U+1F1ED U+1F1F0',
 600 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HK.svg',
 601 |     },
 602 |     HM: {
 603 |         name: 'Heard & McDonald Islands',
 604 |         emoji: '🇭🇲',
 605 |         unicode: 'U+1F1ED U+1F1F2',
 606 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HM.svg',
 607 |     },
 608 |     HN: {
 609 |         name: 'Honduras',
 610 |         emoji: '🇭🇳',
 611 |         unicode: 'U+1F1ED U+1F1F3',
 612 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HN.svg',
 613 |     },
 614 |     HR: {
 615 |         name: 'Croatia',
 616 |         emoji: '🇭🇷',
 617 |         unicode: 'U+1F1ED U+1F1F7',
 618 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HR.svg',
 619 |     },
 620 |     HT: {
 621 |         name: 'Haiti',
 622 |         emoji: '🇭🇹',
 623 |         unicode: 'U+1F1ED U+1F1F9',
 624 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HT.svg',
 625 |     },
 626 |     HU: {
 627 |         name: 'Hungary',
 628 |         emoji: '🇭🇺',
 629 |         unicode: 'U+1F1ED U+1F1FA',
 630 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/HU.svg',
 631 |     },
 632 |     IC: {
 633 |         name: 'Canary Islands',
 634 |         emoji: '🇮🇨',
 635 |         unicode: 'U+1F1EE U+1F1E8',
 636 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IC.svg',
 637 |     },
 638 |     ID: {
 639 |         name: 'Indonesia',
 640 |         emoji: '🇮🇩',
 641 |         unicode: 'U+1F1EE U+1F1E9',
 642 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ID.svg',
 643 |     },
 644 |     IE: {
 645 |         name: 'Ireland',
 646 |         emoji: '🇮🇪',
 647 |         unicode: 'U+1F1EE U+1F1EA',
 648 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IE.svg',
 649 |     },
 650 |     IL: {
 651 |         name: 'Israel',
 652 |         emoji: '🇮🇱',
 653 |         unicode: 'U+1F1EE U+1F1F1',
 654 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IL.svg',
 655 |     },
 656 |     IM: {
 657 |         name: 'Isle of Man',
 658 |         emoji: '🇮🇲',
 659 |         unicode: 'U+1F1EE U+1F1F2',
 660 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IM.svg',
 661 |     },
 662 |     IN: {
 663 |         name: 'India',
 664 |         emoji: '🇮🇳',
 665 |         unicode: 'U+1F1EE U+1F1F3',
 666 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IN.svg',
 667 |     },
 668 |     IO: {
 669 |         name: 'British Indian Ocean Territory',
 670 |         emoji: '🇮🇴',
 671 |         unicode: 'U+1F1EE U+1F1F4',
 672 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IO.svg',
 673 |     },
 674 |     IQ: {
 675 |         name: 'Iraq',
 676 |         emoji: '🇮🇶',
 677 |         unicode: 'U+1F1EE U+1F1F6',
 678 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IQ.svg',
 679 |     },
 680 |     IR: {
 681 |         name: 'Iran',
 682 |         emoji: '🇮🇷',
 683 |         unicode: 'U+1F1EE U+1F1F7',
 684 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IR.svg',
 685 |     },
 686 |     IS: {
 687 |         name: 'Iceland',
 688 |         emoji: '🇮🇸',
 689 |         unicode: 'U+1F1EE U+1F1F8',
 690 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IS.svg',
 691 |     },
 692 |     IT: {
 693 |         name: 'Italy',
 694 |         emoji: '🇮🇹',
 695 |         unicode: 'U+1F1EE U+1F1F9',
 696 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/IT.svg',
 697 |     },
 698 |     JE: {
 699 |         name: 'Jersey',
 700 |         emoji: '🇯🇪',
 701 |         unicode: 'U+1F1EF U+1F1EA',
 702 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JE.svg',
 703 |     },
 704 |     JM: {
 705 |         name: 'Jamaica',
 706 |         emoji: '🇯🇲',
 707 |         unicode: 'U+1F1EF U+1F1F2',
 708 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JM.svg',
 709 |     },
 710 |     JO: {
 711 |         name: 'Jordan',
 712 |         emoji: '🇯🇴',
 713 |         unicode: 'U+1F1EF U+1F1F4',
 714 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JO.svg',
 715 |     },
 716 |     JP: {
 717 |         name: 'Japan',
 718 |         emoji: '🇯🇵',
 719 |         unicode: 'U+1F1EF U+1F1F5',
 720 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/JP.svg',
 721 |     },
 722 |     KE: {
 723 |         name: 'Kenya',
 724 |         emoji: '🇰🇪',
 725 |         unicode: 'U+1F1F0 U+1F1EA',
 726 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KE.svg',
 727 |     },
 728 |     KG: {
 729 |         name: 'Kyrgyzstan',
 730 |         emoji: '🇰🇬',
 731 |         unicode: 'U+1F1F0 U+1F1EC',
 732 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KG.svg',
 733 |     },
 734 |     KH: {
 735 |         name: 'Cambodia',
 736 |         emoji: '🇰🇭',
 737 |         unicode: 'U+1F1F0 U+1F1ED',
 738 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KH.svg',
 739 |     },
 740 |     KI: {
 741 |         name: 'Kiribati',
 742 |         emoji: '🇰🇮',
 743 |         unicode: 'U+1F1F0 U+1F1EE',
 744 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KI.svg',
 745 |     },
 746 |     KM: {
 747 |         name: 'Comoros',
 748 |         emoji: '🇰🇲',
 749 |         unicode: 'U+1F1F0 U+1F1F2',
 750 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KM.svg',
 751 |     },
 752 |     KN: {
 753 |         name: 'St. Kitts & Nevis',
 754 |         emoji: '🇰🇳',
 755 |         unicode: 'U+1F1F0 U+1F1F3',
 756 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KN.svg',
 757 |     },
 758 |     KP: {
 759 |         name: 'North Korea',
 760 |         emoji: '🇰🇵',
 761 |         unicode: 'U+1F1F0 U+1F1F5',
 762 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KP.svg',
 763 |     },
 764 |     KR: {
 765 |         name: 'South Korea',
 766 |         emoji: '🇰🇷',
 767 |         unicode: 'U+1F1F0 U+1F1F7',
 768 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KR.svg',
 769 |     },
 770 |     KW: {
 771 |         name: 'Kuwait',
 772 |         emoji: '🇰🇼',
 773 |         unicode: 'U+1F1F0 U+1F1FC',
 774 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KW.svg',
 775 |     },
 776 |     KY: {
 777 |         name: 'Cayman Islands',
 778 |         emoji: '🇰🇾',
 779 |         unicode: 'U+1F1F0 U+1F1FE',
 780 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KY.svg',
 781 |     },
 782 |     KZ: {
 783 |         name: 'Kazakhstan',
 784 |         emoji: '🇰🇿',
 785 |         unicode: 'U+1F1F0 U+1F1FF',
 786 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/KZ.svg',
 787 |     },
 788 |     LA: {
 789 |         name: 'Laos',
 790 |         emoji: '🇱🇦',
 791 |         unicode: 'U+1F1F1 U+1F1E6',
 792 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LA.svg',
 793 |     },
 794 |     LB: {
 795 |         name: 'Lebanon',
 796 |         emoji: '🇱🇧',
 797 |         unicode: 'U+1F1F1 U+1F1E7',
 798 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LB.svg',
 799 |     },
 800 |     LC: {
 801 |         name: 'St. Lucia',
 802 |         emoji: '🇱🇨',
 803 |         unicode: 'U+1F1F1 U+1F1E8',
 804 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LC.svg',
 805 |     },
 806 |     LI: {
 807 |         name: 'Liechtenstein',
 808 |         emoji: '🇱🇮',
 809 |         unicode: 'U+1F1F1 U+1F1EE',
 810 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LI.svg',
 811 |     },
 812 |     LK: {
 813 |         name: 'Sri Lanka',
 814 |         emoji: '🇱🇰',
 815 |         unicode: 'U+1F1F1 U+1F1F0',
 816 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LK.svg',
 817 |     },
 818 |     LR: {
 819 |         name: 'Liberia',
 820 |         emoji: '🇱🇷',
 821 |         unicode: 'U+1F1F1 U+1F1F7',
 822 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LR.svg',
 823 |     },
 824 |     LS: {
 825 |         name: 'Lesotho',
 826 |         emoji: '🇱🇸',
 827 |         unicode: 'U+1F1F1 U+1F1F8',
 828 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LS.svg',
 829 |     },
 830 |     LT: {
 831 |         name: 'Lithuania',
 832 |         emoji: '🇱🇹',
 833 |         unicode: 'U+1F1F1 U+1F1F9',
 834 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LT.svg',
 835 |     },
 836 |     LU: {
 837 |         name: 'Luxembourg',
 838 |         emoji: '🇱🇺',
 839 |         unicode: 'U+1F1F1 U+1F1FA',
 840 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LU.svg',
 841 |     },
 842 |     LV: {
 843 |         name: 'Latvia',
 844 |         emoji: '🇱🇻',
 845 |         unicode: 'U+1F1F1 U+1F1FB',
 846 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LV.svg',
 847 |     },
 848 |     LY: {
 849 |         name: 'Libya',
 850 |         emoji: '🇱🇾',
 851 |         unicode: 'U+1F1F1 U+1F1FE',
 852 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/LY.svg',
 853 |     },
 854 |     MA: {
 855 |         name: 'Morocco',
 856 |         emoji: '🇲🇦',
 857 |         unicode: 'U+1F1F2 U+1F1E6',
 858 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MA.svg',
 859 |     },
 860 |     MC: {
 861 |         name: 'Monaco',
 862 |         emoji: '🇲🇨',
 863 |         unicode: 'U+1F1F2 U+1F1E8',
 864 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MC.svg',
 865 |     },
 866 |     MD: {
 867 |         name: 'Moldova',
 868 |         emoji: '🇲🇩',
 869 |         unicode: 'U+1F1F2 U+1F1E9',
 870 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MD.svg',
 871 |     },
 872 |     ME: {
 873 |         name: 'Montenegro',
 874 |         emoji: '🇲🇪',
 875 |         unicode: 'U+1F1F2 U+1F1EA',
 876 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ME.svg',
 877 |     },
 878 |     MF: {
 879 |         name: 'St. Martin',
 880 |         emoji: '🇲🇫',
 881 |         unicode: 'U+1F1F2 U+1F1EB',
 882 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MF.svg',
 883 |     },
 884 |     MG: {
 885 |         name: 'Madagascar',
 886 |         emoji: '🇲🇬',
 887 |         unicode: 'U+1F1F2 U+1F1EC',
 888 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MG.svg',
 889 |     },
 890 |     MH: {
 891 |         name: 'Marshall Islands',
 892 |         emoji: '🇲🇭',
 893 |         unicode: 'U+1F1F2 U+1F1ED',
 894 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MH.svg',
 895 |     },
 896 |     MK: {
 897 |         name: 'North Macedonia',
 898 |         emoji: '🇲🇰',
 899 |         unicode: 'U+1F1F2 U+1F1F0',
 900 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MK.svg',
 901 |     },
 902 |     ML: {
 903 |         name: 'Mali',
 904 |         emoji: '🇲🇱',
 905 |         unicode: 'U+1F1F2 U+1F1F1',
 906 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ML.svg',
 907 |     },
 908 |     MM: {
 909 |         name: 'Myanmar (Burma)',
 910 |         emoji: '🇲🇲',
 911 |         unicode: 'U+1F1F2 U+1F1F2',
 912 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MM.svg',
 913 |     },
 914 |     MN: {
 915 |         name: 'Mongolia',
 916 |         emoji: '🇲🇳',
 917 |         unicode: 'U+1F1F2 U+1F1F3',
 918 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MN.svg',
 919 |     },
 920 |     MO: {
 921 |         name: 'Macao SAR China',
 922 |         emoji: '🇲🇴',
 923 |         unicode: 'U+1F1F2 U+1F1F4',
 924 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MO.svg',
 925 |     },
 926 |     MP: {
 927 |         name: 'Northern Mariana Islands',
 928 |         emoji: '🇲🇵',
 929 |         unicode: 'U+1F1F2 U+1F1F5',
 930 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MP.svg',
 931 |     },
 932 |     MQ: {
 933 |         name: 'Martinique',
 934 |         emoji: '🇲🇶',
 935 |         unicode: 'U+1F1F2 U+1F1F6',
 936 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MQ.svg',
 937 |     },
 938 |     MR: {
 939 |         name: 'Mauritania',
 940 |         emoji: '🇲🇷',
 941 |         unicode: 'U+1F1F2 U+1F1F7',
 942 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MR.svg',
 943 |     },
 944 |     MS: {
 945 |         name: 'Montserrat',
 946 |         emoji: '🇲🇸',
 947 |         unicode: 'U+1F1F2 U+1F1F8',
 948 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MS.svg',
 949 |     },
 950 |     MT: {
 951 |         name: 'Malta',
 952 |         emoji: '🇲🇹',
 953 |         unicode: 'U+1F1F2 U+1F1F9',
 954 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MT.svg',
 955 |     },
 956 |     MU: {
 957 |         name: 'Mauritius',
 958 |         emoji: '🇲🇺',
 959 |         unicode: 'U+1F1F2 U+1F1FA',
 960 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MU.svg',
 961 |     },
 962 |     MV: {
 963 |         name: 'Maldives',
 964 |         emoji: '🇲🇻',
 965 |         unicode: 'U+1F1F2 U+1F1FB',
 966 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MV.svg',
 967 |     },
 968 |     MW: {
 969 |         name: 'Malawi',
 970 |         emoji: '🇲🇼',
 971 |         unicode: 'U+1F1F2 U+1F1FC',
 972 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MW.svg',
 973 |     },
 974 |     MX: {
 975 |         name: 'Mexico',
 976 |         emoji: '🇲🇽',
 977 |         unicode: 'U+1F1F2 U+1F1FD',
 978 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MX.svg',
 979 |     },
 980 |     MY: {
 981 |         name: 'Malaysia',
 982 |         emoji: '🇲🇾',
 983 |         unicode: 'U+1F1F2 U+1F1FE',
 984 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MY.svg',
 985 |     },
 986 |     MZ: {
 987 |         name: 'Mozambique',
 988 |         emoji: '🇲🇿',
 989 |         unicode: 'U+1F1F2 U+1F1FF',
 990 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/MZ.svg',
 991 |     },
 992 |     NA: {
 993 |         name: 'Namibia',
 994 |         emoji: '🇳🇦',
 995 |         unicode: 'U+1F1F3 U+1F1E6',
 996 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NA.svg',
 997 |     },
 998 |     NC: {
 999 |         name: 'New Caledonia',
1000 |         emoji: '🇳🇨',
1001 |         unicode: 'U+1F1F3 U+1F1E8',
1002 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NC.svg',
1003 |     },
1004 |     NE: {
1005 |         name: 'Niger',
1006 |         emoji: '🇳🇪',
1007 |         unicode: 'U+1F1F3 U+1F1EA',
1008 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NE.svg',
1009 |     },
1010 |     NF: {
1011 |         name: 'Norfolk Island',
1012 |         emoji: '🇳🇫',
1013 |         unicode: 'U+1F1F3 U+1F1EB',
1014 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NF.svg',
1015 |     },
1016 |     NG: {
1017 |         name: 'Nigeria',
1018 |         emoji: '🇳🇬',
1019 |         unicode: 'U+1F1F3 U+1F1EC',
1020 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NG.svg',
1021 |     },
1022 |     NI: {
1023 |         name: 'Nicaragua',
1024 |         emoji: '🇳🇮',
1025 |         unicode: 'U+1F1F3 U+1F1EE',
1026 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NI.svg',
1027 |     },
1028 |     NL: {
1029 |         name: 'Netherlands',
1030 |         emoji: '🇳🇱',
1031 |         unicode: 'U+1F1F3 U+1F1F1',
1032 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NL.svg',
1033 |     },
1034 |     NO: {
1035 |         name: 'Norway',
1036 |         emoji: '🇳🇴',
1037 |         unicode: 'U+1F1F3 U+1F1F4',
1038 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NO.svg',
1039 |     },
1040 |     NP: {
1041 |         name: 'Nepal',
1042 |         emoji: '🇳🇵',
1043 |         unicode: 'U+1F1F3 U+1F1F5',
1044 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NP.svg',
1045 |     },
1046 |     NR: {
1047 |         name: 'Nauru',
1048 |         emoji: '🇳🇷',
1049 |         unicode: 'U+1F1F3 U+1F1F7',
1050 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NR.svg',
1051 |     },
1052 |     NU: {
1053 |         name: 'Niue',
1054 |         emoji: '🇳🇺',
1055 |         unicode: 'U+1F1F3 U+1F1FA',
1056 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NU.svg',
1057 |     },
1058 |     NZ: {
1059 |         name: 'New Zealand',
1060 |         emoji: '🇳🇿',
1061 |         unicode: 'U+1F1F3 U+1F1FF',
1062 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/NZ.svg',
1063 |     },
1064 |     OM: {
1065 |         name: 'Oman',
1066 |         emoji: '🇴🇲',
1067 |         unicode: 'U+1F1F4 U+1F1F2',
1068 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/OM.svg',
1069 |     },
1070 |     PA: {
1071 |         name: 'Panama',
1072 |         emoji: '🇵🇦',
1073 |         unicode: 'U+1F1F5 U+1F1E6',
1074 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PA.svg',
1075 |     },
1076 |     PE: {
1077 |         name: 'Peru',
1078 |         emoji: '🇵🇪',
1079 |         unicode: 'U+1F1F5 U+1F1EA',
1080 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PE.svg',
1081 |     },
1082 |     PF: {
1083 |         name: 'French Polynesia',
1084 |         emoji: '🇵🇫',
1085 |         unicode: 'U+1F1F5 U+1F1EB',
1086 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PF.svg',
1087 |     },
1088 |     PG: {
1089 |         name: 'Papua New Guinea',
1090 |         emoji: '🇵🇬',
1091 |         unicode: 'U+1F1F5 U+1F1EC',
1092 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PG.svg',
1093 |     },
1094 |     PH: {
1095 |         name: 'Philippines',
1096 |         emoji: '🇵🇭',
1097 |         unicode: 'U+1F1F5 U+1F1ED',
1098 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PH.svg',
1099 |     },
1100 |     PK: {
1101 |         name: 'Pakistan',
1102 |         emoji: '🇵🇰',
1103 |         unicode: 'U+1F1F5 U+1F1F0',
1104 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PK.svg',
1105 |     },
1106 |     PL: {
1107 |         name: 'Poland',
1108 |         emoji: '🇵🇱',
1109 |         unicode: 'U+1F1F5 U+1F1F1',
1110 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PL.svg',
1111 |     },
1112 |     PM: {
1113 |         name: 'St. Pierre & Miquelon',
1114 |         emoji: '🇵🇲',
1115 |         unicode: 'U+1F1F5 U+1F1F2',
1116 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PM.svg',
1117 |     },
1118 |     PN: {
1119 |         name: 'Pitcairn Islands',
1120 |         emoji: '🇵🇳',
1121 |         unicode: 'U+1F1F5 U+1F1F3',
1122 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PN.svg',
1123 |     },
1124 |     PR: {
1125 |         name: 'Puerto Rico',
1126 |         emoji: '🇵🇷',
1127 |         unicode: 'U+1F1F5 U+1F1F7',
1128 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PR.svg',
1129 |     },
1130 |     PS: {
1131 |         name: 'Palestinian Territories',
1132 |         emoji: '🇵🇸',
1133 |         unicode: 'U+1F1F5 U+1F1F8',
1134 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PS.svg',
1135 |     },
1136 |     PT: {
1137 |         name: 'Portugal',
1138 |         emoji: '🇵🇹',
1139 |         unicode: 'U+1F1F5 U+1F1F9',
1140 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PT.svg',
1141 |     },
1142 |     PW: {
1143 |         name: 'Palau',
1144 |         emoji: '🇵🇼',
1145 |         unicode: 'U+1F1F5 U+1F1FC',
1146 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PW.svg',
1147 |     },
1148 |     PY: {
1149 |         name: 'Paraguay',
1150 |         emoji: '🇵🇾',
1151 |         unicode: 'U+1F1F5 U+1F1FE',
1152 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/PY.svg',
1153 |     },
1154 |     QA: {
1155 |         name: 'Qatar',
1156 |         emoji: '🇶🇦',
1157 |         unicode: 'U+1F1F6 U+1F1E6',
1158 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/QA.svg',
1159 |     },
1160 |     RE: {
1161 |         name: 'Réunion',
1162 |         emoji: '🇷🇪',
1163 |         unicode: 'U+1F1F7 U+1F1EA',
1164 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RE.svg',
1165 |     },
1166 |     RO: {
1167 |         name: 'Romania',
1168 |         emoji: '🇷🇴',
1169 |         unicode: 'U+1F1F7 U+1F1F4',
1170 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RO.svg',
1171 |     },
1172 |     RS: {
1173 |         name: 'Serbia',
1174 |         emoji: '🇷🇸',
1175 |         unicode: 'U+1F1F7 U+1F1F8',
1176 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RS.svg',
1177 |     },
1178 |     RU: {
1179 |         name: 'Russia',
1180 |         emoji: '🇷🇺',
1181 |         unicode: 'U+1F1F7 U+1F1FA',
1182 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RU.svg',
1183 |     },
1184 |     RW: {
1185 |         name: 'Rwanda',
1186 |         emoji: '🇷🇼',
1187 |         unicode: 'U+1F1F7 U+1F1FC',
1188 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/RW.svg',
1189 |     },
1190 |     SA: {
1191 |         name: 'Saudi Arabia',
1192 |         emoji: '🇸🇦',
1193 |         unicode: 'U+1F1F8 U+1F1E6',
1194 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SA.svg',
1195 |     },
1196 |     SB: {
1197 |         name: 'Solomon Islands',
1198 |         emoji: '🇸🇧',
1199 |         unicode: 'U+1F1F8 U+1F1E7',
1200 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SB.svg',
1201 |     },
1202 |     SC: {
1203 |         name: 'Seychelles',
1204 |         emoji: '🇸🇨',
1205 |         unicode: 'U+1F1F8 U+1F1E8',
1206 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SC.svg',
1207 |     },
1208 |     SD: {
1209 |         name: 'Sudan',
1210 |         emoji: '🇸🇩',
1211 |         unicode: 'U+1F1F8 U+1F1E9',
1212 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SD.svg',
1213 |     },
1214 |     SE: {
1215 |         name: 'Sweden',
1216 |         emoji: '🇸🇪',
1217 |         unicode: 'U+1F1F8 U+1F1EA',
1218 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SE.svg',
1219 |     },
1220 |     SG: {
1221 |         name: 'Singapore',
1222 |         emoji: '🇸🇬',
1223 |         unicode: 'U+1F1F8 U+1F1EC',
1224 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SG.svg',
1225 |     },
1226 |     SH: {
1227 |         name: 'St. Helena',
1228 |         emoji: '🇸🇭',
1229 |         unicode: 'U+1F1F8 U+1F1ED',
1230 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SH.svg',
1231 |     },
1232 |     SI: {
1233 |         name: 'Slovenia',
1234 |         emoji: '🇸🇮',
1235 |         unicode: 'U+1F1F8 U+1F1EE',
1236 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SI.svg',
1237 |     },
1238 |     SJ: {
1239 |         name: 'Svalbard & Jan Mayen',
1240 |         emoji: '🇸🇯',
1241 |         unicode: 'U+1F1F8 U+1F1EF',
1242 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SJ.svg',
1243 |     },
1244 |     SK: {
1245 |         name: 'Slovakia',
1246 |         emoji: '🇸🇰',
1247 |         unicode: 'U+1F1F8 U+1F1F0',
1248 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SK.svg',
1249 |     },
1250 |     SL: {
1251 |         name: 'Sierra Leone',
1252 |         emoji: '🇸🇱',
1253 |         unicode: 'U+1F1F8 U+1F1F1',
1254 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SL.svg',
1255 |     },
1256 |     SM: {
1257 |         name: 'San Marino',
1258 |         emoji: '🇸🇲',
1259 |         unicode: 'U+1F1F8 U+1F1F2',
1260 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SM.svg',
1261 |     },
1262 |     SN: {
1263 |         name: 'Senegal',
1264 |         emoji: '🇸🇳',
1265 |         unicode: 'U+1F1F8 U+1F1F3',
1266 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SN.svg',
1267 |     },
1268 |     SO: {
1269 |         name: 'Somalia',
1270 |         emoji: '🇸🇴',
1271 |         unicode: 'U+1F1F8 U+1F1F4',
1272 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SO.svg',
1273 |     },
1274 |     SR: {
1275 |         name: 'Suriname',
1276 |         emoji: '🇸🇷',
1277 |         unicode: 'U+1F1F8 U+1F1F7',
1278 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SR.svg',
1279 |     },
1280 |     SS: {
1281 |         name: 'South Sudan',
1282 |         emoji: '🇸🇸',
1283 |         unicode: 'U+1F1F8 U+1F1F8',
1284 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SS.svg',
1285 |     },
1286 |     ST: {
1287 |         name: 'São Tomé & Príncipe',
1288 |         emoji: '🇸🇹',
1289 |         unicode: 'U+1F1F8 U+1F1F9',
1290 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ST.svg',
1291 |     },
1292 |     SV: {
1293 |         name: 'El Salvador',
1294 |         emoji: '🇸🇻',
1295 |         unicode: 'U+1F1F8 U+1F1FB',
1296 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SV.svg',
1297 |     },
1298 |     SX: {
1299 |         name: 'Sint Maarten',
1300 |         emoji: '🇸🇽',
1301 |         unicode: 'U+1F1F8 U+1F1FD',
1302 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SX.svg',
1303 |     },
1304 |     SY: {
1305 |         name: 'Syria',
1306 |         emoji: '🇸🇾',
1307 |         unicode: 'U+1F1F8 U+1F1FE',
1308 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SY.svg',
1309 |     },
1310 |     SZ: {
1311 |         name: 'Eswatini',
1312 |         emoji: '🇸🇿',
1313 |         unicode: 'U+1F1F8 U+1F1FF',
1314 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SZ.svg',
1315 |     },
1316 |     TA: {
1317 |         name: 'Tristan da Cunha',
1318 |         emoji: '🇹🇦',
1319 |         unicode: 'U+1F1F9 U+1F1E6',
1320 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TA.svg',
1321 |     },
1322 |     TC: {
1323 |         name: 'Turks & Caicos Islands',
1324 |         emoji: '🇹🇨',
1325 |         unicode: 'U+1F1F9 U+1F1E8',
1326 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TC.svg',
1327 |     },
1328 |     TD: {
1329 |         name: 'Chad',
1330 |         emoji: '🇹🇩',
1331 |         unicode: 'U+1F1F9 U+1F1E9',
1332 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TD.svg',
1333 |     },
1334 |     TF: {
1335 |         name: 'French Southern Territories',
1336 |         emoji: '🇹🇫',
1337 |         unicode: 'U+1F1F9 U+1F1EB',
1338 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TF.svg',
1339 |     },
1340 |     TG: {
1341 |         name: 'Togo',
1342 |         emoji: '🇹🇬',
1343 |         unicode: 'U+1F1F9 U+1F1EC',
1344 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TG.svg',
1345 |     },
1346 |     TH: {
1347 |         name: 'Thailand',
1348 |         emoji: '🇹🇭',
1349 |         unicode: 'U+1F1F9 U+1F1ED',
1350 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TH.svg',
1351 |     },
1352 |     TJ: {
1353 |         name: 'Tajikistan',
1354 |         emoji: '🇹🇯',
1355 |         unicode: 'U+1F1F9 U+1F1EF',
1356 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TJ.svg',
1357 |     },
1358 |     TK: {
1359 |         name: 'Tokelau',
1360 |         emoji: '🇹🇰',
1361 |         unicode: 'U+1F1F9 U+1F1F0',
1362 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TK.svg',
1363 |     },
1364 |     TL: {
1365 |         name: 'Timor-Leste',
1366 |         emoji: '🇹🇱',
1367 |         unicode: 'U+1F1F9 U+1F1F1',
1368 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TL.svg',
1369 |     },
1370 |     TM: {
1371 |         name: 'Turkmenistan',
1372 |         emoji: '🇹🇲',
1373 |         unicode: 'U+1F1F9 U+1F1F2',
1374 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TM.svg',
1375 |     },
1376 |     TN: {
1377 |         name: 'Tunisia',
1378 |         emoji: '🇹🇳',
1379 |         unicode: 'U+1F1F9 U+1F1F3',
1380 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TN.svg',
1381 |     },
1382 |     TO: {
1383 |         name: 'Tonga',
1384 |         emoji: '🇹🇴',
1385 |         unicode: 'U+1F1F9 U+1F1F4',
1386 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TO.svg',
1387 |     },
1388 |     TR: {
1389 |         name: 'Turkey',
1390 |         emoji: '🇹🇷',
1391 |         unicode: 'U+1F1F9 U+1F1F7',
1392 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TR.svg',
1393 |     },
1394 |     TT: {
1395 |         name: 'Trinidad & Tobago',
1396 |         emoji: '🇹🇹',
1397 |         unicode: 'U+1F1F9 U+1F1F9',
1398 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TT.svg',
1399 |     },
1400 |     TV: {
1401 |         name: 'Tuvalu',
1402 |         emoji: '🇹🇻',
1403 |         unicode: 'U+1F1F9 U+1F1FB',
1404 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TV.svg',
1405 |     },
1406 |     TW: {
1407 |         name: 'Taiwan',
1408 |         emoji: '🇹🇼',
1409 |         unicode: 'U+1F1F9 U+1F1FC',
1410 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TW.svg',
1411 |     },
1412 |     TZ: {
1413 |         name: 'Tanzania',
1414 |         emoji: '🇹🇿',
1415 |         unicode: 'U+1F1F9 U+1F1FF',
1416 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/TZ.svg',
1417 |     },
1418 |     UA: {
1419 |         name: 'Ukraine',
1420 |         emoji: '🇺🇦',
1421 |         unicode: 'U+1F1FA U+1F1E6',
1422 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UA.svg',
1423 |     },
1424 |     UG: {
1425 |         name: 'Uganda',
1426 |         emoji: '🇺🇬',
1427 |         unicode: 'U+1F1FA U+1F1EC',
1428 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UG.svg',
1429 |     },
1430 |     UM: {
1431 |         name: 'U.S. Outlying Islands',
1432 |         emoji: '🇺🇲',
1433 |         unicode: 'U+1F1FA U+1F1F2',
1434 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UM.svg',
1435 |     },
1436 |     UN: {
1437 |         name: 'United Nations',
1438 |         emoji: '🇺🇳',
1439 |         unicode: 'U+1F1FA U+1F1F3',
1440 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UN.svg',
1441 |     },
1442 |     US: {
1443 |         name: 'United States',
1444 |         emoji: '🇺🇸',
1445 |         unicode: 'U+1F1FA U+1F1F8',
1446 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/US.svg',
1447 |     },
1448 |     UY: {
1449 |         name: 'Uruguay',
1450 |         emoji: '🇺🇾',
1451 |         unicode: 'U+1F1FA U+1F1FE',
1452 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UY.svg',
1453 |     },
1454 |     UZ: {
1455 |         name: 'Uzbekistan',
1456 |         emoji: '🇺🇿',
1457 |         unicode: 'U+1F1FA U+1F1FF',
1458 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/UZ.svg',
1459 |     },
1460 |     VA: {
1461 |         name: 'Vatican City',
1462 |         emoji: '🇻🇦',
1463 |         unicode: 'U+1F1FB U+1F1E6',
1464 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VA.svg',
1465 |     },
1466 |     VC: {
1467 |         name: 'St. Vincent & Grenadines',
1468 |         emoji: '🇻🇨',
1469 |         unicode: 'U+1F1FB U+1F1E8',
1470 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VC.svg',
1471 |     },
1472 |     VE: {
1473 |         name: 'Venezuela',
1474 |         emoji: '🇻🇪',
1475 |         unicode: 'U+1F1FB U+1F1EA',
1476 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VE.svg',
1477 |     },
1478 |     VG: {
1479 |         name: 'British Virgin Islands',
1480 |         emoji: '🇻🇬',
1481 |         unicode: 'U+1F1FB U+1F1EC',
1482 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VG.svg',
1483 |     },
1484 |     VI: {
1485 |         name: 'U.S. Virgin Islands',
1486 |         emoji: '🇻🇮',
1487 |         unicode: 'U+1F1FB U+1F1EE',
1488 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VI.svg',
1489 |     },
1490 |     VN: {
1491 |         name: 'Vietnam',
1492 |         emoji: '🇻🇳',
1493 |         unicode: 'U+1F1FB U+1F1F3',
1494 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VN.svg',
1495 |     },
1496 |     VU: {
1497 |         name: 'Vanuatu',
1498 |         emoji: '🇻🇺',
1499 |         unicode: 'U+1F1FB U+1F1FA',
1500 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/VU.svg',
1501 |     },
1502 |     WF: {
1503 |         name: 'Wallis & Futuna',
1504 |         emoji: '🇼🇫',
1505 |         unicode: 'U+1F1FC U+1F1EB',
1506 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WF.svg',
1507 |     },
1508 |     WS: {
1509 |         name: 'Samoa',
1510 |         emoji: '🇼🇸',
1511 |         unicode: 'U+1F1FC U+1F1F8',
1512 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WS.svg',
1513 |     },
1514 |     XK: {
1515 |         name: 'Kosovo',
1516 |         emoji: '🇽🇰',
1517 |         unicode: 'U+1F1FD U+1F1F0',
1518 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/XK.svg',
1519 |     },
1520 |     YE: {
1521 |         name: 'Yemen',
1522 |         emoji: '🇾🇪',
1523 |         unicode: 'U+1F1FE U+1F1EA',
1524 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/YE.svg',
1525 |     },
1526 |     YT: {
1527 |         name: 'Mayotte',
1528 |         emoji: '🇾🇹',
1529 |         unicode: 'U+1F1FE U+1F1F9',
1530 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/YT.svg',
1531 |     },
1532 |     ZA: {
1533 |         name: 'South Africa',
1534 |         emoji: '🇿🇦',
1535 |         unicode: 'U+1F1FF U+1F1E6',
1536 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZA.svg',
1537 |     },
1538 |     ZM: {
1539 |         name: 'Zambia',
1540 |         emoji: '🇿🇲',
1541 |         unicode: 'U+1F1FF U+1F1F2',
1542 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZM.svg',
1543 |     },
1544 |     ZW: {
1545 |         name: 'Zimbabwe',
1546 |         emoji: '🇿🇼',
1547 |         unicode: 'U+1F1FF U+1F1FC',
1548 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ZW.svg',
1549 |     },
1550 |     ENGLAND: {
1551 |         name: 'England',
1552 |         emoji: '🏴󠁧󠁢󠁥󠁮󠁧󠁿',
1553 |         unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0065 U+E006E U+E0067 U+E007F',
1554 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/ENGLAND.svg',
1555 |     },
1556 |     SCOTLAND: {
1557 |         name: 'Scotland',
1558 |         emoji: '🏴󠁧󠁢󠁳󠁣󠁴󠁿',
1559 |         unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0073 U+E0063 U+E0074 U+E007F',
1560 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/SCOTLAND.svg',
1561 |     },
1562 |     WALES: {
1563 |         name: 'Wales',
1564 |         emoji: '🏴󠁧󠁢󠁷󠁬󠁳󠁿',
1565 |         unicode: 'U+1F3F4 U+E0067 U+E0062 U+E0077 U+E006C U+E0073 U+E007F',
1566 |         image: 'https://cdn.jsdelivr.net/npm/country-flag-emoji-json@2.0.0/dist/images/WALES.svg',
1567 |     },
1568 | };
1569 | 
1570 | export default countries;
1571 | 


--------------------------------------------------------------------------------