+ {/* Header with navigation */}
+
+
{title}
+
+
+
+ {currentIndex} of {totalCards}
+
+
+
+
+
+ {/* Mobile/Tablet Layout (< 768px) */}
+
+
+
Market
+
+ Pays out
+ Odds
+
+
+
+ {/* Candidates */}
+ {candidates.map((candidate, index) => (
+
+
+

+
+
+
+ {candidate.payout}
+
+ {candidate.odds}
+
+
+
+ ))}
+
+ {/* Volume and markets */}
+
+ {volume} vol
+ {marketCount} markets
+
+
+ {/* News section */}
+
+
+
+ {/* Desktop Layout (>= 768px) */}
+
+ {/* Left side - Market info */}
+
+
+ Market
+ Pays out
+ Odds
+
+
+ {/* Candidates */}
+ {candidates.map((candidate, index) => (
+
+
+

+
+
+
{candidate.payout}
+
+ {candidate.odds}
+
+
+ ))}
+
+ {/* Volume and markets */}
+
+ {volume} vol
+ {marketCount} markets
+
+
+ {/* News section */}
+
+
+
+ {/* Right side - Chart and legend */}
+
+ {/* Legend */}
+
+
+ {candidates.map((candidate, index) => (
+
+
+
{candidate.label}
+
{candidate.odds}
+
+ ))}
+
+
Max
+
+
+ {/* Chart placeholder */}
+
+
+
+ {/* Y-axis labels */}
+
+ 40%
+ 30%
+ 20%
+ 10%
+ 0%
+
+
+ {/* X-axis labels */}
+
+ May
+ Jul
+ Oct
+ Dec
+ Mar
+
+
+
+
+
+ );
+}
diff --git a/frontend/src/components/Search/MobileSearch.tsx b/frontend/src/components/Search/MobileSearch.tsx
new file mode 100644
index 0000000..742009b
--- /dev/null
+++ b/frontend/src/components/Search/MobileSearch.tsx
@@ -0,0 +1,84 @@
+import { useState, useEffect, useRef } from "react";
+import MaxLogo from "../Header/MaxLogo";
+export default function MobileSearch() {
+ const [isSearchOpen, setIsSearchOpen] = useState(false);
+ const [shouldShake, setShouldShake] = useState(false);
+
+ const handleFocus = () => {
+ setShouldShake(true);
+ setTimeout(() => setShouldShake(false), 500);
+ };
+
+ useEffect(() => {
+ if (isSearchOpen) {
+ setShouldShake(true);
+ const timer = setTimeout(() => setShouldShake(false), 500);
+ return () => clearTimeout(timer);
+ }
+ }, [isSearchOpen]);
+ return (
+ <>
+