efaaf16f60
Some checks are pending
E2E / Playwright e2e (push) Waiting to run
- Refactored metadata for contacts, administration, and Ulticards pages to utilize dynamic app names and descriptions. - Introduced new product pages for Ultiai, Ultical, Ulticards, Ultidrive, Ultimail, and Ultimeet with appropriate metadata. - Enhanced layout components to ensure consistent styling and functionality across new product sections. - Updated various components to replace hardcoded labels with dynamic references to improve maintainability and consistency.
108 lines
4.8 KiB
TypeScript
108 lines
4.8 KiB
TypeScript
"use client"
|
|
|
|
import { Icon } from "@iconify/react"
|
|
|
|
const ACCENT = "#34A853"
|
|
|
|
const DEVICES = [
|
|
{ icon: "mdi:microphone", label: "MacBook Pro · Micro" },
|
|
{ icon: "mdi:video", label: "Caméra FaceTime HD" },
|
|
{ icon: "mdi:volume-high", label: "Haut-parleurs système" },
|
|
] as const
|
|
|
|
const WAITING = [
|
|
{ name: "Léa Fontaine", color: "#34A853" },
|
|
{ name: "Vincent Morel", color: "#4285F4" },
|
|
] as const
|
|
|
|
/** Aperçu statique du lobby UltiMeet — réglages caméra/micro avant de rejoindre. */
|
|
export function UltimeetLobbyDemo() {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="landing-glass-strong overflow-hidden rounded-2xl shadow-[0_32px_70px_-36px_rgba(30,40,90,0.45)]">
|
|
<div className="grid grid-cols-1 sm:grid-cols-[minmax(0,1.15fr)_minmax(0,1fr)]">
|
|
<div className="relative flex min-h-[12rem] items-center justify-center border-b border-[var(--landing-line)] bg-[var(--landing-bg)] p-4 sm:border-b-0 sm:border-r">
|
|
<div
|
|
className="absolute inset-3 rounded-xl"
|
|
style={{
|
|
background: `radial-gradient(circle at 50% 40%, ${ACCENT}26, transparent 70%)`,
|
|
}}
|
|
aria-hidden
|
|
/>
|
|
<span
|
|
className="z-10 flex size-16 items-center justify-center rounded-full text-xl font-semibold text-white"
|
|
style={{ backgroundColor: ACCENT }}
|
|
aria-hidden
|
|
>
|
|
CV
|
|
</span>
|
|
<div className="absolute bottom-4 left-4 flex items-center gap-1.5 rounded-md bg-black/55 px-2 py-1 text-[11px] font-medium text-white">
|
|
<Icon icon="mdi:microphone" className="size-3" aria-hidden />
|
|
Camille Visiteur
|
|
</div>
|
|
<div className="absolute bottom-4 right-4 flex gap-1.5">
|
|
<span className="flex size-8 items-center justify-center rounded-full bg-black/55 text-white" aria-hidden>
|
|
<Icon icon="mdi:microphone" className="size-4" />
|
|
</span>
|
|
<span className="flex size-8 items-center justify-center rounded-full bg-black/55 text-white" aria-hidden>
|
|
<Icon icon="mdi:blur" className="size-4" />
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="flex flex-col gap-3 p-5">
|
|
<div className="flex items-center gap-2 text-xs font-medium text-[var(--landing-muted)]">
|
|
<img src="/agenda-mark.svg" alt="" className="size-4 object-contain" aria-hidden />
|
|
Lien généré depuis UltiCal
|
|
</div>
|
|
<h3 className="text-base font-semibold tracking-tight">Atelier Nord — point hebdo</h3>
|
|
|
|
<ul className="flex flex-col gap-1.5">
|
|
{DEVICES.map((device) => (
|
|
<li
|
|
key={device.label}
|
|
className="flex items-center gap-2.5 rounded-lg border border-[var(--landing-line)] px-2.5 py-2 text-xs text-[var(--landing-fg)]"
|
|
>
|
|
<Icon icon={device.icon} className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
|
|
<span className="min-w-0 flex-1 truncate">{device.label}</span>
|
|
<Icon icon="mdi:chevron-down" className="size-4 shrink-0 text-[var(--landing-muted)]" aria-hidden />
|
|
</li>
|
|
))}
|
|
</ul>
|
|
|
|
<div className="flex items-center gap-2 rounded-lg bg-[var(--landing-chip)]/40 px-2.5 py-2 text-xs text-[var(--landing-muted)]">
|
|
<div className="flex -space-x-1.5">
|
|
{WAITING.map((person) => (
|
|
<span
|
|
key={person.name}
|
|
className="flex size-5 items-center justify-center rounded-full border border-[var(--landing-bg)] text-[9px] font-semibold text-white"
|
|
style={{ backgroundColor: person.color }}
|
|
aria-hidden
|
|
>
|
|
{person.name.charAt(0)}
|
|
</span>
|
|
))}
|
|
</div>
|
|
2 personnes déjà dans la salle d'attente
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
tabIndex={-1}
|
|
className="mt-auto flex h-10 items-center justify-center gap-2 rounded-full text-sm font-semibold text-white"
|
|
style={{ backgroundColor: ACCENT }}
|
|
>
|
|
<Icon icon="mdi:video" className="size-4" aria-hidden />
|
|
Demander à rejoindre
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<p className="flex items-start gap-2 text-sm text-[var(--landing-muted)]">
|
|
<Icon icon="mdi:incognito" className="mt-0.5 size-4 shrink-0" aria-hidden />
|
|
Aperçu statique — testez vos périphériques avant d'entrer, aucun appareil activé.
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|