feat: Add OpenMoji browser and Fibonacci converter

This commit introduces two new features:

1. **OpenMoji Browser**:
- Adds a new tab to browse, search, and copy emojis from the OpenMoji library.
- The `openmoji` npm package has been added as a dependency.

2. **Fibonacci Algorithm Comparator**:
- Adds a new tab to compare the performance of naive recursive and O(1)-space iterative solutions for calculating Fibonacci numbers.
- Provides C++ code examples and an analysis of the generated assembly code to illustrate the efficiency difference.

.idx/integrations.json

@@ -0,0 +1,4 @@
+{
+  "firebase_hosting": {},
+  "google_maps_platform": {}
+}

.idx/mcp.json

@@ -0,0 +1,3 @@
+{
+  "mcpServers": {}
+}

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+	// See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+	// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+	// List of extensions which should be recommended for users of this workspace.
+	"recommendations": [
+		
+	],
+	// List of extensions recommended by Code OSS that should not be recommended for users of this workspace.
+	"unwantedRecommendations": [
+		
+	]
+}

app/globals.css

@@ -0,0 +1,68 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 0 0% 3.9%;
+    --card: 0 0% 100%;
+    --card-foreground: 0 0% 3.9%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 0 0% 3.9%;
+    --primary: 0 0% 9%;
+    --primary-foreground: 0 0% 98%;
+    --secondary: 0 0% 96.1%;
+    --secondary-foreground: 0 0% 9%;
+    --muted: 0 0% 96.1%;
+    --muted-foreground: 0 0% 45.1%;
+    --accent: 0 0% 96.1%;
+    --accent-foreground: 0 0% 9%;
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 89.8%;
+    --input: 0 0% 89.8%;
+    --ring: 0 0% 3.9%;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
+    --radius: 0.5rem
+  }
+  .dark {
+    --background: 0 0% 3.9%;
+    --foreground: 0 0% 98%;
+    --card: 0 0% 3.9%;
+    --card-foreground: 0 0% 98%;
+    --popover: 0 0% 3.9%;
+    --popover-foreground: 0 0% 98%;
+    --primary: 0 0% 98%;
+    --primary-foreground: 0 0% 9%;
+    --secondary: 0 0% 14.9%;
+    --secondary-foreground: 0 0% 98%;
+    --muted: 0 0% 14.9%;
+    --muted-foreground: 0 0% 63.9%;
+    --accent: 0 0% 14.9%;
+    --accent-foreground: 0 0% 98%;
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 0 0% 98%;
+    --border: 0 0% 14.9%;
+    --input: 0 0% 14.9%;
+    --ring: 0 0% 83.1%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}

app/page.js

@@ -1,11 +1,13 @@
 import React from "react";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
-import { Sparkles, Zap, Smile, Settings, Type, Signal } from "lucide-react";
+import { Sparkles, Zap, Smile, Settings, Type, Signal, Search, FunctionSquare } from "lucide-react";
 import LeetConverter from "@/components/LeetConverter";
 import EmojiConverter from "@/components/EmojiConverter";
 import CustomMapper from "@/components/CustomMapper";
 import AsciiConverter from "@/components/AsciiConverter";
 import MorseConverter from "@/components/MorseConverter";
+import OpenMojiBrowser from "@/components/OpenMojiBrowser";
+import FibonacciConverter from "@/components/FibonacciConverter";
 
 export default function Home() {
   return (
@@ -33,7 +35,7 @@ export default function Home() {
             <div className="bg-white/80 backdrop-blur-xl rounded-3xl shadow-2xl border border-white/20 overflow-hidden">
               <Tabs defaultValue="leet" className="w-full">
                 <div className="border-b border-slate-200 bg-white/50 px-6 pt-6">
-                  <TabsList className="grid w-full grid-cols-5 bg-slate-100/80">
+                  <TabsList className="grid w-full grid-cols-7 bg-slate-100/80">
                     <TabsTrigger value="leet" className="flex items-center gap-2">
                       <Zap className="w-4 h-4" />
                       <span className="hidden sm:inline">L33T Speak</span>
@@ -44,6 +46,16 @@ export default function Home() {
                       <span className="hidden sm:inline">Emoji Speak</span>
                       <span className="sm:hidden">Emoji</span>
                     </TabsTrigger>
+                    <TabsTrigger value="openmoji" className="flex items-center gap-2">
+                      <Search className="w-4 h-4" />
+                      <span className="hidden sm:inline">OpenMoji</span>
+                      <span className="sm:hidden">Moji</span>
+                    </TabsTrigger>
+                    <TabsTrigger value="fibonacci" className="flex items-center gap-2">
+                      <FunctionSquare className="w-4 h-4" />
+                      <span className="hidden sm:inline">Fibonacci</span>
+                      <span className="sm:hidden">Fib</span>
+                    </TabsTrigger>
                     <TabsTrigger value="ascii" className="flex items-center gap-2">
                       <Type className="w-4 h-4" />
                       <span className="hidden sm:inline">ASCII Art</span>
@@ -70,6 +82,14 @@ export default function Home() {
                   <TabsContent value="emoji" className="mt-0">
                     <EmojiConverter />
                   </TabsContent>
+                  
+                  <TabsContent value="openmoji" className="mt-0">
+                    <OpenMojiBrowser />
+                  </TabsContent>
+                  
+                  <TabsContent value="fibonacci" className="mt-0">
+                    <FibonacciConverter />
+                  </TabsContent>
 
                   <TabsContent value="ascii" className="mt-0">
                     <AsciiConverter />

components.json

@@ -0,0 +1,22 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": true,
+  "tsx": false,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "app/globals.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "registries": {}
+}

components/AsciiConverter.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";

components/CustomMapper.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Input } from "@/components/ui/input";

components/EmojiConverter.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";

components/FibonacciConverter.js

@@ -0,0 +1,126 @@
+import React, { useState } from 'react';
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
+
+const FibonacciConverter = () => {
+  const [n, setN] = useState(10);
+  const [algorithm, setAlgorithm] = useState('iterative');
+  const [result, setResult] = useState(null);
+  const [executionTime, setExecutionTime] = useState(null);
+
+  const fibRecursive = (num) => {
+    if (num <= 1) return num;
+    return fibRecursive(num - 1) + fibRecursive(num - 2);
+  };
+
+  const fibIterative = (num) => {
+    if (num <= 1) return num;
+    let a = 0, b = 1;
+    for (let i = 2; i <= num; i++) {
+      const temp = a + b;
+      a = b;
+      b = temp;
+    }
+    return b;
+  };
+
+  const calculateFib = () => {
+    const startTime = performance.now();
+    const res = algorithm === 'recursive' ? fibRecursive(n) : fibIterative(n);
+    const endTime = performance.now();
+    setResult(res);
+    setExecutionTime(endTime - startTime);
+  };
+
+  const recursiveCode = `// Naive Recursive (Exponential Time, O(2^n))
+long long fib_recursive(int n) {
+    if (n <= 1) {
+        return n;
+    }
+    return fib_recursive(n - 1) + fib_recursive(n - 2);
+}`;
+
+  const iterativeCode = `// Iterative (Linear Time, O(n), O(1) Space)
+long long fib_iterative(int n) {
+    if (n <= 1) {
+        return n;
+    }
+    long long a = 0, b = 1;
+    for (int i = 2; i <= n; ++i) {
+        long long temp = a + b;
+        a = b;
+        b = temp;
+    }
+    return b;
+}`;
+
+  return (
+    <div className="space-y-6">
+        <Card>
+            <CardHeader>
+                <CardTitle>Fibonacci Calculator</CardTitle>
+                <CardDescription>Select an algorithm and a number to see the result and execution time.</CardDescription>
+            </CardHeader>
+            <CardContent className="space-y-4">
+                <div className="flex items-center space-x-4">
+                    <Input type="number" value={n} onChange={(e) => setN(parseInt(e.target.value))} placeholder="Enter n" className="w-24" />
+                    <Select value={algorithm} onValueChange={setAlgorithm}>
+                        <SelectTrigger className="w-[180px]">
+                            <SelectValue placeholder="Select Algorithm" />
+                        </SelectTrigger>
+                        <SelectContent>
+                            <SelectItem value="iterative">Iterative</SelectItem>
+                            <SelectItem value="recursive">Recursive</SelectItem>
+                        </SelectContent>
+                    </Select>
+                    <Button onClick={calculateFib}>Calculate</Button>
+                </div>
+                {result !== null && (
+                    <div>
+                        <p>Result: {result}</p>
+                        <p>Execution Time: {executionTime?.toFixed(4)} ms</p>
+                    </div>
+                )}
+            </CardContent>
+        </Card>
+
+        <Card>
+            <CardHeader>
+                <CardTitle>Assembly-Level Proof</CardTitle>
+                <CardDescription>A comparison of the generated x86-64 assembly from a standard C++ compiler (like GCC or Clang on Godbolt).</CardDescription>
+            </CardHeader>
+            <CardContent className="grid md:grid-cols-2 gap-6">
+                <div>
+                    <h3 className="font-semibold mb-2">Naive Recursive C++</h3>
+                    <pre className="bg-slate-100 p-4 rounded-md text-sm whitespace-pre-wrap"><code>{recursiveCode}</code></pre>
+                    <div className="mt-4 text-sm">
+                        <p className="font-semibold">Assembly Analysis:</p>
+                        <ul className="list-disc list-inside space-y-1 mt-1">
+                            <li>Generates two recursive `call fib_recursive` instructions inside the function body.</li>
+                            <li>Each call pushes a return address onto the stack, leading to a stack depth proportional to `n`.</li>
+                            <li>For large `n`, this will inevitably lead to a `stack overflow` and is highly inefficient due to recomputing the same values many times.</li>
+                        </ul>
+                    </div>
+                </div>
+                <div>
+                    <h3 className="font-semibold mb-2">O(1)-Space Iterative C++</h3>
+                    <pre className="bg-slate-100 p-4 rounded-md text-sm whitespace-pre-wrap"><code>{iterativeCode}</code></pre>
+                    <div className="mt-4 text-sm">
+                        <p className="font-semibold">Assembly Analysis:</p>
+                        <ul className="list-disc list-inside space-y-1 mt-1">
+                            <li>The core logic is a simple loop (`.L3` in a typical assembly output).</li>
+                            <li>It uses registers for variables `a` and `b`, performing additions and moves.</li>
+                            <li>Contains `jmp` (jump) instructions to loop, but no recursive `call` instructions.</li>
+                            <li>Stack usage is constant (O(1)), making it efficient and safe for very large `n`.</li>
+                        </ul>
+                    </div>
+                </div>
+            </CardContent>
+        </Card>
+    </div>
+  );
+};
+
+export default FibonacciConverter;

components/LeetConverter.js

@@ -1,3 +1,4 @@
+'use client';
 import React, { useState } from "react";
 import { Button } from "@/components/ui/button";
 import { Textarea } from "@/components/ui/textarea";

components/OpenMojiBrowser.js

@@ -0,0 +1,67 @@
+import React, { useState, useEffect } from 'react';
+import { Input } from "@/components/ui/input";
+import { ScrollArea } from "@/components/ui/scroll-area";
+import { Button } from '@/components/ui/button';
+import { Copy } from 'lucide-react';
+
+const OpenMojiBrowser = () => {
+  const [emojis, setEmojis] = useState([]);
+  const [searchTerm, setSearchTerm] = useState('');
+  const [selectedEmoji, setSelectedEmoji] = useState(null);
+
+  useEffect(() => {
+    fetch('https://unpkg.com/openmoji@latest/data/openmoji.json')
+      .then(response => response.json())
+      .then(data => setEmojis(data));
+  }, []);
+
+  const filteredEmojis = emojis.filter(emoji =>
+    emoji.annotation.toLowerCase().includes(searchTerm.toLowerCase())
+  );
+
+  const handleCopyToClipboard = (emoji) => {
+    navigator.clipboard.writeText(emoji.emoji);
+    setSelectedEmoji(emoji.hexcode);
+    setTimeout(() => setSelectedEmoji(null), 2000);
+  };
+
+  return (
+    <div className="h-[600px] flex flex-col gap-4">
+      <Input
+        type="text"
+        placeholder="Search for an emoji..."
+        value={searchTerm}
+        onChange={(e) => setSearchTerm(e.target.value)}
+        className="w-full"
+      />
+      <ScrollArea className="flex-grow border rounded-md p-4 bg-white">
+        <div className="grid grid-cols-8 gap-4">
+          {filteredEmojis.map(emoji => (
+            <div 
+              key={emoji.hexcode} 
+              className="relative group flex items-center justify-center p-2 rounded-lg hover:bg-slate-100 cursor-pointer transition-colors"
+              onClick={() => handleCopyToClipboard(emoji)}
+            >
+              <img 
+                src={`https://unpkg.com/openmoji@latest/color/svg/${emoji.hexcode}.svg`} 
+                alt={emoji.annotation} 
+                className="w-10 h-10"
+              />
+              <div className="absolute bottom-full mb-2 w-max bg-slate-800 text-white text-xs rounded py-1 px-2 opacity-0 group-hover:opacity-100 transition-opacity">
+                {emoji.annotation}
+                <div className="absolute top-full left-1/2 -translate-x-1/2 w-0 h-0 border-x-4 border-x-transparent border-t-4 border-t-slate-800"></div>
+              </div>
+              {selectedEmoji === emoji.hexcode && (
+                <div className="absolute inset-0 bg-green-500/20 rounded-lg flex items-center justify-center">
+                  <Copy className="w-6 h-6 text-green-700" />
+                </div>
+              )}
+            </div>
+          ))}
+        </div>
+      </ScrollArea>
+    </div>
+  );
+};
+
+export default OpenMojiBrowser;

components/ui/tabs.jsx

@@ -0,0 +1,43 @@
+"use client"
+
+import * as React from "react"
+import * as TabsPrimitive from "@radix-ui/react-tabs"
+
+import { cn } from "@/lib/utils"
+
+const Tabs = TabsPrimitive.Root
+
+const TabsList = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.List
+    ref={ref}
+    className={cn(
+      "inline-flex h-9 items-center justify-center rounded-lg bg-muted p-1 text-muted-foreground",
+      className
+    )}
+    {...props} />
+))
+TabsList.displayName = TabsPrimitive.List.displayName
+
+const TabsTrigger = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow",
+      className
+    )}
+    {...props} />
+))
+TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+
+const TabsContent = React.forwardRef(({ className, ...props }, ref) => (
+  <TabsPrimitive.Content
+    ref={ref}
+    className={cn(
+      "mt-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+      className
+    )}
+    {...props} />
+))
+TabsContent.displayName = TabsPrimitive.Content.displayName
+
+export { Tabs, TabsList, TabsTrigger, TabsContent }

firebase.js

@@ -0,0 +1,22 @@
+
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import { getAnalytics } from "firebase/analytics";
+// TODO: Add SDKs for Firebase products that you want to use
+// https://firebase.google.com/docs/web/setup#available-libraries
+
+// Your web app's Firebase configuration
+// For Firebase JS SDK v7.20.0 and later, measurementId is optional
+const firebaseConfig = {
+  apiKey: "your-api-key",
+  authDomain: "your-auth-domain",
+  projectId: "your-project-id",
+  storageBucket: "your-storage-bucket",
+  messagingSenderId: "your-messaging-sender-id",
+  appId: "your-app-id",
+  measurementId: "your-measurement-id"
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+const analytics = getAnalytics(app);

jsconfig.json

@@ -0,0 +1,7 @@
+{
+  "compilerOptions": {
+    "paths": {
+      "@/*": ["./*"]
+    }
+  }
+}

lib/utils.js

@@ -0,0 +1,6 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge"
+
+export function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}

next.config.js

@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+module.exports = nextConfig;

package.json

@@ -3,35 +3,38 @@
         "version": "0.1.0",
         "private": true,
         "scripts": {
-          "dev": "next dev",
-          "build": "next build",
-          "start": "next start",
-          "lint": "next lint"
+                "dev": "next dev",
+                "build": "next build",
+                "start": "next start",
+                "lint": "next lint"
         },
         "dependencies": {
-          "@radix-ui/react-label": "^2.0.2",
-          "@radix-ui/react-select": "^2.0.0",
-          "@radix-ui/react-slider": "^1.1.2",
-          "@radix-ui/react-slot": "^1.0.2",
-          "@radix-ui/react-switch": "^1.0.3",
-          "class-variance-authority": "^0.7.0",
-          "clsx": "^2.1.0",
-          "lucide-react": "^0.356.0",
-          "next": "14.1.3",
-          "next-themes": "^0.2.1",
-          "react": "^18",
-          "react-dom": "^18",
-          "sonner": "^1.4.3",
-          "tailwind-merge": "^2.2.1",
-          "tailwindcss-animate": "^1.0.7"
+                "@radix-ui/react-label": "^2.0.2",
+                "@radix-ui/react-select": "^2.0.0",
+                "@radix-ui/react-slider": "^1.1.2",
+                "@radix-ui/react-slot": "^1.0.2",
+                "@radix-ui/react-switch": "^1.0.3",
+                "@radix-ui/react-tabs": "^1.1.13",
+                "class-variance-authority": "^0.7.1",
+                "clsx": "^2.1.1",
+                "firebase": "^12.6.0",
+                "lucide-react": "^0.356.0",
+                "next": "^14.2.33",
+                "next-themes": "^0.2.1",
+                "openmoji": "^16.0.0",
+                "react": "^18",
+                "react-dom": "^18",
+                "sonner": "^1.4.3",
+                "tailwind-merge": "^2.6.0",
+                "tailwindcss-animate": "^1.0.7"
         },
         "devDependencies": {
-          "@types/node": "^20",
-          "@types/react": "^18",
-          "@types/react-dom": "^18",
-          "autoprefixer": "^10.0.1",
-          "postcss": "^8",
-          "tailwindcss": "^3.3.0",
-          "typescript": "^5"
+                "@types/node": "^20",
+                "@types/react": "^18",
+                "@types/react-dom": "^18",
+                "autoprefixer": "^10.4.22",
+                "postcss": "^8.5.6",
+                "tailwindcss": "^3.4.18",
+                "typescript": "^5"
         }
-      }
+}

postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

tailwind.config.js

@@ -0,0 +1,61 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    darkMode: ['class'],
+    content: [
+    './pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+  	extend: {
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {
+  			background: 'hsl(var(--background))',
+  			foreground: 'hsl(var(--foreground))',
+  			card: {
+  				DEFAULT: 'hsl(var(--card))',
+  				foreground: 'hsl(var(--card-foreground))'
+  			},
+  			popover: {
+  				DEFAULT: 'hsl(var(--popover))',
+  				foreground: 'hsl(var(--popover-foreground))'
+  			},
+  			primary: {
+  				DEFAULT: 'hsl(var(--primary))',
+  				foreground: 'hsl(var(--primary-foreground))'
+  			},
+  			secondary: {
+  				DEFAULT: 'hsl(var(--secondary))',
+  				foreground: 'hsl(var(--secondary-foreground))'
+  			},
+  			muted: {
+  				DEFAULT: 'hsl(var(--muted))',
+  				foreground: 'hsl(var(--muted-foreground))'
+  			},
+  			accent: {
+  				DEFAULT: 'hsl(var(--accent))',
+  				foreground: 'hsl(var(--accent-foreground))'
+  			},
+  			destructive: {
+  				DEFAULT: 'hsl(var(--destructive))',
+  				foreground: 'hsl(var(--destructive-foreground))'
+  			},
+  			border: 'hsl(var(--border))',
+  			input: 'hsl(var(--input))',
+  			ring: 'hsl(var(--ring))',
+  			chart: {
+  				'1': 'hsl(var(--chart-1))',
+  				'2': 'hsl(var(--chart-2))',
+  				'3': 'hsl(var(--chart-3))',
+  				'4': 'hsl(var(--chart-4))',
+  				'5': 'hsl(var(--chart-5))'
+  			}
+  		}
+  	}
+  },
+  plugins: [require("tailwindcss-animate")],
+}