+ {title}
+
- {/* Title */}
-
- {title}
-
-
- {/* Footer */}
+ {/* Footer: icon left, domain right */}
+
+ 
+ <>
+
+ {enableLightbox && (
+ setIsLightboxOpen(false)}
+ src={src}
+ alt={alt}
+ type='image'
+ />
+ )}
+
)
}
-export function ActionVideo({ src, alt }: ActionVideoProps) {
+export function ActionVideo({ src, alt, enableLightbox = true }: ActionVideoProps) {
+ const [isLightboxOpen, setIsLightboxOpen] = useState(false)
const resolvedSrc = getAssetUrl(src)
+ const handleClick = () => {
+ if (enableLightbox) {
+ setIsLightboxOpen(true)
+ }
+ }
+
return (
-
+ <>
+
+ {enableLightbox && (
+ setIsLightboxOpen(false)}
+ src={src}
+ alt={alt}
+ type='video'
+ />
+ )}
+
)
}
diff --git a/apps/docs/components/ui/language-dropdown.tsx b/apps/docs/components/ui/language-dropdown.tsx
index a34be00d4..20231c811 100644
--- a/apps/docs/components/ui/language-dropdown.tsx
+++ b/apps/docs/components/ui/language-dropdown.tsx
@@ -1,8 +1,9 @@
'use client'
import { useEffect, useState } from 'react'
-import { Check, ChevronRight } from 'lucide-react'
+import { Check, ChevronDown } from 'lucide-react'
import { useParams, usePathname, useRouter } from 'next/navigation'
+import { cn } from '@/lib/utils'
const languages = {
en: { name: 'English', flag: '🇺🇸' },
@@ -15,6 +16,7 @@ const languages = {
export function LanguageDropdown() {
const [isOpen, setIsOpen] = useState(false)
+ const [hoveredIndex, setHoveredIndex] = useState(-1)
const pathname = usePathname()
const params = useParams()
const router = useRouter()
@@ -71,6 +73,15 @@ export function LanguageDropdown() {
return () => window.removeEventListener('keydown', onKey)
}, [isOpen])
+ // Reset hovered index when popover closes
+ useEffect(() => {
+ if (!isOpen) {
+ setHoveredIndex(-1)
+ }
+ }, [isOpen])
+
+ const languageEntries = Object.entries(languages)
+
return (
-
diff --git a/apps/docs/components/ui/action-media.tsx b/apps/docs/components/ui/action-media.tsx
index 1f187fb90..629716b66 100644
--- a/apps/docs/components/ui/action-media.tsx
+++ b/apps/docs/components/ui/action-media.tsx
@@ -1,38 +1,87 @@
'use client'
-import { getAssetUrl } from '@/lib/utils'
+import { useState } from 'react'
+import { cn, getAssetUrl } from '@/lib/utils'
+import { Lightbox } from './lightbox'
interface ActionImageProps {
src: string
alt: string
+ enableLightbox?: boolean
}
interface ActionVideoProps {
src: string
alt: string
+ enableLightbox?: boolean
}
-export function ActionImage({ src, alt }: ActionImageProps) {
+export function ActionImage({ src, alt, enableLightbox = true }: ActionImageProps) {
+ const [isLightboxOpen, setIsLightboxOpen] = useState(false)
+
+ const handleClick = () => {
+ if (enableLightbox) {
+ setIsLightboxOpen(true)
+ }
+ }
+
return (
-
{isOpen && (
@@ -98,29 +109,37 @@ export function LanguageDropdown() {
)}
diff --git a/apps/docs/components/ui/sim-logo.tsx b/apps/docs/components/ui/sim-logo.tsx
new file mode 100644
index 000000000..06cc0d95d
--- /dev/null
+++ b/apps/docs/components/ui/sim-logo.tsx
@@ -0,0 +1,108 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+interface SimLogoProps {
+ className?: string
+}
+
+/**
+ * Sim logo with icon and text.
+ * The icon stays green (#33C482), text adapts to light/dark mode.
+ */
+export function SimLogo({ className }: SimLogoProps) {
+ return (
+
+ )
+}
+
+/**
+ * Full Sim logo with icon and "Sim" text.
+ * The icon stays green (#33C482), text adapts to light/dark mode.
+ */
+export function SimLogoFull({ className }: SimLogoProps) {
+ return (
+
+ )
+}