npm - lyra-web3-playground - Versions diffs - 0.1.0 - Mend

lyra-web3-playground 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (57) hide show

package/.github/workflows/deploy.yml +53 -0
package/LICENSE +21 -0
package/README.md +47 -0
package/index.html +42 -0
package/package.json +75 -0
package/postcss.config.js +12 -0
package/public/404.html +21 -0
package/public/icon.svg +10 -0
package/public/manifest.json +17 -0
package/public/robots.txt +34 -0
package/server.json +9 -0
package/src/App.tsx +38 -0
package/src/components/Accessibility/AccessibilityButton.tsx +266 -0
package/src/components/Accessibility/AccessibilityPanel.tsx +792 -0
package/src/components/Accessibility/AccessibleButton.tsx +251 -0
package/src/components/Accessibility/AccessibleIcon.tsx +134 -0
package/src/components/Accessibility/Announcer.tsx +108 -0
package/src/components/Accessibility/CodeOutputCaption.tsx +307 -0
package/src/components/Accessibility/ColorBlindFilters.tsx +103 -0
package/src/components/Accessibility/DwellClick.tsx +165 -0
package/src/components/Accessibility/HighContrast.tsx +199 -0
package/src/components/Accessibility/KeyboardNavigation.tsx +260 -0
package/src/components/Accessibility/LiveAnnouncer.tsx +82 -0
package/src/components/Accessibility/ReadingGuide.tsx +72 -0
package/src/components/Accessibility/ReducedMotion.tsx +148 -0
package/src/components/Accessibility/SkipLink.tsx +21 -0
package/src/components/Accessibility/SkipLinks.tsx +79 -0
package/src/components/Accessibility/VisualFeedback.tsx +118 -0
package/src/components/Accessibility/index.ts +68 -0
package/src/components/Accessibility/useFeedback.ts +69 -0
package/src/components/AuthModal.tsx +243 -0
package/src/components/ConsentModal.tsx +205 -0
package/src/components/Footer.tsx +94 -0
package/src/components/LanguageSelector.tsx +60 -0
package/src/components/NavBar.tsx +335 -0
package/src/components/WalletConnect.tsx +274 -0
package/src/hooks/useMarketData.ts +413 -0
package/src/lib/supabase.ts +43 -0
package/src/main.tsx +15 -0
package/src/pages/MarketsPage.tsx +612 -0
package/src/services/marketData.ts +476 -0
package/src/stores/accessibilityStore.ts +405 -0
package/src/stores/authStore.ts +209 -0
package/src/stores/i18nStore.ts +397 -0
package/src/stores/themeStore.ts +47 -0
package/src/stores/walletStore.ts +30 -0
package/src/styles/accessibility.css +582 -0
package/src/styles/index.css +637 -0
package/src/types/contracts.ts +34 -0
package/src/types/index.ts +11 -0
package/src/utils/chainConfigs.ts +467 -0
package/src/utils/helpers.ts +116 -0
package/src/vite-env.d.ts +40 -0
package/tailwind.config.js +80 -0
package/tsconfig.json +31 -0
package/tsconfig.node.json +10 -0
package/vite.config.ts +26 -0

package/.github/workflows/deploy.yml ADDED Viewed

@@ -0,0 +1,53 @@
+name: Deploy to GitHub Pages
+on:
+  push:
+    branches: [main]
+  workflow_dispatch:
+permissions:
+  contents: read
+  pages: write
+  id-token: write
+concurrency:
+  group: "pages"
+  cancel-in-progress: true
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Build
+        run: npm run build
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Upload artifact
+        uses: actions/upload-pages-artifact@v3
+        with:
+          path: './dist'
+  deploy:
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+    runs-on: ubuntu-latest
+    needs: build
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4

package/LICENSE ADDED Viewed

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

package/README.md ADDED Viewed

@@ -0,0 +1,47 @@
+# Crypto Market Data
+Live cryptocurrency and DeFi market dashboard with data from CoinGecko and DeFiLlama.
+[Live Crypto Market Data Dashboard](https://nirholas.github.io/crypto-market-data)
+Cryptocurrency prices and market data. That's it! With a basic UI. I originally built this within [Lyra Web3 Playground](https://nirholas.github.io/crypto-market-data) and I thought it might be helpful for those looking for something very simple, a good learning experience to build + deploy, or maybe you're like me and just enjoy building and sharing simple yet useful creations. Live data, hooked up to CoinGecko and Defillama.
+## Features
+- 🪙 **Cryptocurrencies** - Top coins by market cap with 7-day sparklines
+- 🏦 **DeFi Protocols** - Protocol TVL rankings from DeFiLlama
+- 📈 **Yields** - DeFi yield farming opportunities
+- ⛓️ **Chains** - Blockchain TVL comparison
+- 🌙 **Dark Mode** - Toggle between light and dark themes
+- 📱 **Responsive** - Works on desktop and mobile
+## Quick Start
+```bash
+# Install dependencies
+npm install
+# Start development server
+npm run dev
+# Build for production
+npm run build
+```
+## Deploy to GitHub Pages
+```bash
+npm run build
+# Upload dist/ folder to GitHub Pages
+```
+## Data Sources
+- [CoinGecko](https://www.coingecko.com) - Cryptocurrency prices and market data
+- [DeFiLlama](https://defillama.com) - DeFi protocol TVL and yield data
+## License
+MIT © [nich](https://github.com/nirholas)

package/index.html ADDED Viewed

@@ -0,0 +1,42 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="icon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="description" content="Crypto Market Data - Live cryptocurrency and DeFi market dashboard with data from CoinGecko and DeFiLlama." />
+    <meta name="keywords" content="crypto, cryptocurrency, bitcoin, ethereum, defi, market data, prices, coingecko, defillama" />
+    <meta name="theme-color" content="#6366f1" />
+    <meta name="author" content="nirholas" />
+    <!-- Open Graph / Facebook -->
+    <meta property="og:type" content="website" />
+    <meta property="og:url" content="https://nirholas.github.io/crypto-market-data/" />
+    <meta property="og:title" content="Crypto Market Data" />
+    <meta property="og:description" content="Live cryptocurrency and DeFi market dashboard." />
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary" />
+    <meta name="twitter:title" content="Crypto Market Data" />
+    <meta name="twitter:description" content="Live cryptocurrency and DeFi market dashboard." />
+    <title>Crypto Market Data</title>
+    <!-- GitHub Pages SPA redirect handler -->
+    <script type="text/javascript">
+      (function(l) {
+        if (l.search[1] === '/' ) {
+          var decoded = l.search.slice(1).split('&').map(function(s) {
+            return s.replace(/~and~/g, '&')
+          }).join('?');
+          window.history.replaceState(null, null,
+            l.pathname.slice(0, -1) + decoded + l.hash
+          );
+        }
+      }(window.location))
+    </script>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,75 @@
+{
+  "name": "lyra-web3-playground",
+  "version": "0.1.0",
+  "description": "Lyra Web3 Playground - Learn blockchain development with interactive examples. Compile and deploy Solidity in your browser.",
+  "author": {
+    "name": "nich",
+    "url": "https://github.com/nirholas"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/nirholas/lyra-web3-playground.git"
+  },
+  "homepage": "https://lyra.works/",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 20",
+    "test": "vitest",
+    "test:ui": "vitest --ui",
+    "test:coverage": "vitest --coverage"
+  },
+  "dependencies": {
+    "@icons-pack/react-simple-icons": "^10.0.0",
+    "@monaco-editor/react": "^4.6.0",
+    "@solana/web3.js": "^1.87.0",
+    "@supabase/supabase-js": "^2.39.0",
+    "clsx": "^2.0.0",
+    "ethers": "^6.9.0",
+    "lucide-react": "^0.294.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-live": "^4.1.8",
+    "react-router-dom": "^6.21.0",
+    "tailwind-merge": "^2.2.0",
+    "viem": "^2.0.0",
+    "zustand": "^4.4.7"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/react": "^18.2.43",
+    "@types/react-dom": "^18.2.17",
+    "@typescript-eslint/eslint-plugin": "^6.14.0",
+    "@typescript-eslint/parser": "^6.14.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/ui": "^4.0.15",
+    "autoprefixer": "^10.4.16",
+    "eslint": "^8.55.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "jsdom": "^23.0.1",
+    "postcss": "^8.4.32",
+    "tailwindcss": "^3.3.6",
+    "typescript": "^5.2.2",
+    "vite": "^7.2.6",
+    "vitest": "^4.0.15"
+  },
+  "license": "MIT",
+  "keywords": [
+    "web3",
+    "blockchain",
+    "ethereum",
+    "solana",
+    "ai",
+    "machine-learning",
+    "dapp",
+    "smart-contracts",
+    "nft",
+    "defi",
+    "playground",
+    "education"
+  ]
+}

package/postcss.config.js ADDED Viewed

@@ -0,0 +1,12 @@
+/**
+ * ✨ built by nich
+ * 🌐 GitHub: github.com/nirholas
+ * 💫 Your work matters more than you know 💎
+ */
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

package/public/404.html ADDED Viewed

@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Crypto Market Data</title>
+    <script>
+      // GitHub Pages SPA redirect
+      var pathSegmentsToKeep = 1;
+      var l = window.location;
+      l.replace(
+        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
+        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
+        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
+        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
+        l.hash
+      );
+    </script>
+  </head>
+  <body>
+  </body>
+</html>

package/public/icon.svg ADDED Viewed

@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
+  <defs>
+    <linearGradient id="grad" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#6366f1"/>
+      <stop offset="100%" style="stop-color:#8b5cf6"/>
+    </linearGradient>
+  </defs>
+  <circle cx="50" cy="50" r="45" fill="url(#grad)"/>
+  <text x="50" y="65" font-size="40" text-anchor="middle" fill="white" font-family="Arial, sans-serif" font-weight="bold">📊</text>
+</svg>

package/public/manifest.json ADDED Viewed

@@ -0,0 +1,17 @@
+{
+  "name": "Crypto Market Data",
+  "short_name": "Markets",
+  "description": "Live cryptocurrency and DeFi market dashboard",
+  "start_url": "/crypto-market-data/",
+  "display": "standalone",
+  "background_color": "#111827",
+  "theme_color": "#6366f1",
+  "icons": [
+    {
+      "src": "icon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any maskable"
+    }
+  ]
+}

package/public/robots.txt ADDED Viewed

@@ -0,0 +1,34 @@
+# Lyra Web3 Playground - robots.txt
+# https://lyra.works
+# Allow all crawlers
+User-agent: *
+Allow: /
+# AI Crawlers - explicitly allowed
+User-agent: GPTBot
+Allow: /
+User-agent: ChatGPT-User
+Allow: /
+User-agent: Claude-Web
+Allow: /
+User-agent: Anthropic-AI
+Allow: /
+User-agent: Google-Extended
+Allow: /
+User-agent: Bingbot
+Allow: /
+User-agent: Googlebot
+Allow: /
+# Sitemap location
+Sitemap: https://lyra.works/sitemap.xml
+# Crawl-delay for politeness (optional)
+Crawl-delay: 1

package/server.json ADDED Viewed

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://static.modelcontextprotocol.io/schemas/2025-12-11/server.schema.json",
+  "name": "io.github.nirholas/crypto-market-data",
+  "version": "1.0.0",
+  "title": "Crypto Market Data",
+  "description": "Real-time crypto prices OHLCV orderbook - Bitcoin Ethereum 10000+ tokens",
+  "keywords": ["crypto", "market-data", "prices", "ohlcv", "bitcoin", "ethereum"],
+  "repository": {"url": "https://github.com/nirholas/crypto-market-data", "source": "github"}
+}

package/src/App.tsx ADDED Viewed

@@ -0,0 +1,38 @@
+/**
+ * Crypto Market Data App
+ * https://github.com/nirholas/crypto-market-data
+ */
+import { useEffect } from 'react';
+import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
+import { useThemeStore } from './stores/themeStore';
+import MarketsPage from './pages/MarketsPage';
+import Footer from './components/Footer';
+const basename = import.meta.env.BASE_URL;
+function App() {
+  const { mode } = useThemeStore();
+  useEffect(() => {
+    document.documentElement.classList.toggle('dark', mode === 'dark');
+  }, [mode]);
+  return (
+    <Router basename={basename}>
+      <div className={`min-h-screen ${mode === 'dark' ? 'dark' : ''}`}>
+        <div className="bg-gray-50 dark:bg-gray-900 text-gray-900 dark:text-gray-100 min-h-screen">
+          <main className="pb-20 md:pb-0">
+            <Routes>
+              <Route path="/" element={<MarketsPage />} />
+              <Route path="/markets" element={<MarketsPage />} />
+            </Routes>
+          </main>
+          <Footer />
+        </div>
+      </div>
+    </Router>
+  );
+}
+export default App;

package/src/components/Accessibility/AccessibilityButton.tsx ADDED Viewed

@@ -0,0 +1,266 @@
+/**
+ * ✨ built by nich
+ * 🌐 GitHub: github.com/nirholas
+ * ♿ Floating Accessibility Button - Always accessible, never intrusive
+ * 💫 One-click access to inclusive features
+ */
+import { useState, useEffect, useCallback } from 'react';
+import { Accessibility, X, Settings, Volume2, VolumeX, Moon, Sun, Minus, Plus, Eye } from 'lucide-react';
+import { useAccessibilityStore } from '@/stores/accessibilityStore';
+import AccessibilityPanel from './AccessibilityPanel';
+export default function AccessibilityButton() {
+  const [isPanelOpen, setIsPanelOpen] = useState(false);
+  const [isQuickMenuOpen, setIsQuickMenuOpen] = useState(false);
+  const [position, setPosition] = useState({ x: 20, y: window.innerHeight - 80 });
+  const [isDragging, setIsDragging] = useState(false);
+  const [dragOffset, setDragOffset] = useState({ x: 0, y: 0 });
+  const { settings, updateSetting, speak } = useAccessibilityStore();
+  // Handle dragging for repositioning
+  const handleMouseDown = (e: React.MouseEvent) => {
+    if (e.button === 0) {
+      setIsDragging(true);
+      setDragOffset({
+        x: e.clientX - position.x,
+        y: e.clientY - position.y
+      });
+    }
+  };
+  const handleMouseMove = useCallback((e: MouseEvent) => {
+    if (isDragging) {
+      const newX = Math.max(0, Math.min(window.innerWidth - 60, e.clientX - dragOffset.x));
+      const newY = Math.max(0, Math.min(window.innerHeight - 60, e.clientY - dragOffset.y));
+      setPosition({ x: newX, y: newY });
+    }
+  }, [isDragging, dragOffset]);
+  const handleMouseUp = useCallback(() => {
+    setIsDragging(false);
+  }, []);
+  useEffect(() => {
+    if (isDragging) {
+      window.addEventListener('mousemove', handleMouseMove);
+      window.addEventListener('mouseup', handleMouseUp);
+      return () => {
+        window.removeEventListener('mousemove', handleMouseMove);
+        window.removeEventListener('mouseup', handleMouseUp);
+      };
+    }
+  }, [isDragging, handleMouseMove, handleMouseUp]);
+  // Keyboard shortcut: Alt + A to open accessibility panel
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.altKey && e.key === 'a') {
+        e.preventDefault();
+        setIsPanelOpen(prev => !prev);
+        speak(isPanelOpen ? 'Closing accessibility panel' : 'Opening accessibility panel');
+      }
+      if (e.key === 'Escape' && isPanelOpen) {
+        setIsPanelOpen(false);
+        speak('Accessibility panel closed');
+      }
+    };
+    window.addEventListener('keydown', handleKeyDown);
+    return () => window.removeEventListener('keydown', handleKeyDown);
+  }, [isPanelOpen, speak]);
+  const toggleDarkMode = () => {
+    document.documentElement.classList.toggle('dark');
+    speak(document.documentElement.classList.contains('dark') ? 'Dark mode enabled' : 'Light mode enabled');
+  };
+  const increaseFontSize = () => {
+    const sizes = ['normal', 'large', 'x-large', 'xx-large'] as const;
+    const currentIndex = sizes.indexOf(settings.fontSize);
+    if (currentIndex < sizes.length - 1) {
+      updateSetting('fontSize', sizes[currentIndex + 1]);
+      speak(`Font size increased to ${sizes[currentIndex + 1]}`);
+    }
+  };
+  const decreaseFontSize = () => {
+    const sizes = ['normal', 'large', 'x-large', 'xx-large'] as const;
+    const currentIndex = sizes.indexOf(settings.fontSize);
+    if (currentIndex > 0) {
+      updateSetting('fontSize', sizes[currentIndex - 1]);
+      speak(`Font size decreased to ${sizes[currentIndex - 1]}`);
+    }
+  };
+  const toggleHighContrast = () => {
+    updateSetting('highContrast', !settings.highContrast);
+    speak(settings.highContrast ? 'High contrast disabled' : 'High contrast enabled');
+  };
+  const toggleTextToSpeech = () => {
+    updateSetting('textToSpeech', !settings.textToSpeech);
+    if (!settings.textToSpeech) {
+      setTimeout(() => speak('Text to speech enabled'), 100);
+    }
+  };
+  return (
+    <>
+      {/* Main Floating Button */}
+      <button
+        onMouseDown={handleMouseDown}
+        onClick={() => {
+          if (!isDragging) {
+            setIsQuickMenuOpen(prev => !prev);
+          }
+        }}
+        className="fixed z-50 w-14 h-14 rounded-full bg-gradient-to-br from-primary-600 to-secondary-600 text-white shadow-lg hover:shadow-xl transition-shadow flex items-center justify-center cursor-move group"
+        style={{ left: position.x, top: position.y }}
+        aria-label="Open accessibility quick menu"
+        aria-expanded={isQuickMenuOpen}
+        aria-haspopup="true"
+        title="Accessibility options (Alt + A for full panel)"
+      >
+        <Accessibility className="w-7 h-7 group-hover:scale-110 transition-transform" aria-hidden="true" />
+      </button>
+      {/* Quick Menu Popup */}
+      {isQuickMenuOpen && (
+        <div
+          className="fixed z-50 bg-white dark:bg-gray-900 rounded-2xl shadow-2xl p-4 border border-gray-200 dark:border-gray-700 min-w-[280px]"
+          style={{
+            left: Math.min(position.x, window.innerWidth - 300),
+            top: Math.max(20, position.y - 280)
+          }}
+          role="menu"
+          aria-label="Accessibility quick menu"
+        >
+          <div className="flex items-center justify-between mb-4">
+            <h3 className="font-bold text-lg flex items-center gap-2">
+              <Accessibility className="w-5 h-5 text-primary-600" />
+              Quick Access
+            </h3>
+            <button
+              onClick={() => setIsQuickMenuOpen(false)}
+              className="p-1 hover:bg-gray-100 dark:hover:bg-gray-800 rounded"
+              aria-label="Close quick menu"
+            >
+              <X className="w-5 h-5" />
+            </button>
+          </div>
+          <div className="space-y-3">
+            {/* Font Size Controls */}
+            <div className="flex items-center justify-between p-2 bg-gray-50 dark:bg-gray-800 rounded-lg">
+              <span className="text-sm font-medium">Text Size</span>
+              <div className="flex items-center gap-2">
+                <button
+                  onClick={decreaseFontSize}
+                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition"
+                  aria-label="Decrease font size"
+                  disabled={settings.fontSize === 'normal'}
+                >
+                  <Minus className="w-4 h-4" />
+                </button>
+                <span className="text-sm min-w-[60px] text-center capitalize">{settings.fontSize}</span>
+                <button
+                  onClick={increaseFontSize}
+                  className="p-2 hover:bg-gray-200 dark:hover:bg-gray-700 rounded-lg transition"
+                  aria-label="Increase font size"
+                  disabled={settings.fontSize === 'xx-large'}
+                >
+                  <Plus className="w-4 h-4" />
+                </button>
+              </div>
+            </div>
+            {/* Quick Toggles */}
+            <button
+              onClick={toggleDarkMode}
+              className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition"
+              role="menuitem"
+            >
+              <span className="flex items-center gap-3">
+                {document.documentElement.classList.contains('dark') ? (
+                  <Sun className="w-5 h-5 text-yellow-500" />
+                ) : (
+                  <Moon className="w-5 h-5 text-gray-600" />
+                )}
+                <span>Dark Mode</span>
+              </span>
+              <span className={`text-xs px-2 py-1 rounded ${
+                document.documentElement.classList.contains('dark')
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
+                  : 'bg-gray-100 dark:bg-gray-700'
+              }`}>
+                {document.documentElement.classList.contains('dark') ? 'On' : 'Off'}
+              </span>
+            </button>
+            <button
+              onClick={toggleHighContrast}
+              className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition"
+              role="menuitem"
+            >
+              <span className="flex items-center gap-3">
+                <Eye className="w-5 h-5 text-blue-500" />
+                <span>High Contrast</span>
+              </span>
+              <span className={`text-xs px-2 py-1 rounded ${
+                settings.highContrast
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
+                  : 'bg-gray-100 dark:bg-gray-700'
+              }`}>
+                {settings.highContrast ? 'On' : 'Off'}
+              </span>
+            </button>
+            <button
+              onClick={toggleTextToSpeech}
+              className="w-full flex items-center justify-between p-3 hover:bg-gray-50 dark:hover:bg-gray-800 rounded-lg transition"
+              role="menuitem"
+            >
+              <span className="flex items-center gap-3">
+                {settings.textToSpeech ? (
+                  <Volume2 className="w-5 h-5 text-green-500" />
+                ) : (
+                  <VolumeX className="w-5 h-5 text-gray-500" />
+                )}
+                <span>Text to Speech</span>
+              </span>
+              <span className={`text-xs px-2 py-1 rounded ${
+                settings.textToSpeech
+                  ? 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-300'
+                  : 'bg-gray-100 dark:bg-gray-700'
+              }`}>
+                {settings.textToSpeech ? 'On' : 'Off'}
+              </span>
+            </button>
+            {/* Full Settings Button */}
+            <button
+              onClick={() => {
+                setIsQuickMenuOpen(false);
+                setIsPanelOpen(true);
+              }}
+              className="w-full flex items-center justify-center gap-2 p-3 bg-gradient-to-r from-primary-600 to-secondary-600 text-white rounded-lg hover:opacity-90 transition"
+              role="menuitem"
+            >
+              <Settings className="w-5 h-5" />
+              <span>All Accessibility Settings</span>
+            </button>
+            <p className="text-xs text-gray-500 text-center mt-2">
+              Keyboard shortcut: <kbd className="px-1 py-0.5 bg-gray-200 dark:bg-gray-700 rounded">Alt + A</kbd>
+            </p>
+          </div>
+        </div>
+      )}
+      {/* Full Accessibility Panel */}
+      <AccessibilityPanel isOpen={isPanelOpen} onClose={() => setIsPanelOpen(false)} />
+    </>
+  );
+}