root
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
'use client'
|
|
|
|
import { useEffect, useState } from 'react'
|
|
import { usePathname } from 'next/navigation'
|
|
import { useMarketplacePreferences } from './MarketplaceShell'
|
|
|
|
type FrameId = 'dashboard' | 'admin' | 'public-site'
|
|
|
|
const frameConfig: Record<FrameId, { label: string; port: number; path: string }> = {
|
|
dashboard: {
|
|
label: 'Company Workspace',
|
|
port: 3001,
|
|
path: '/sign-in',
|
|
},
|
|
admin: {
|
|
label: 'Platform Operations',
|
|
port: 3002,
|
|
path: '/',
|
|
},
|
|
'public-site': {
|
|
label: 'Branded Website',
|
|
port: 3003,
|
|
path: '/',
|
|
},
|
|
}
|
|
|
|
function withPort(port: number, path: string) {
|
|
if (typeof window === 'undefined') return path
|
|
|
|
const url = new URL(window.location.href)
|
|
url.port = String(port)
|
|
url.pathname = path
|
|
url.search = ''
|
|
url.hash = ''
|
|
return url.toString()
|
|
}
|
|
|
|
export default function WorkspaceFrame({ target }: { target: FrameId }) {
|
|
const pathname = usePathname()
|
|
const { language } = useMarketplacePreferences()
|
|
const [src, setSrc] = useState('')
|
|
const config = frameConfig[target]
|
|
const fillViewport = pathname === '/company-workspace'
|
|
const frameHeight = fillViewport ? '100vh' : 'calc(100vh - 56px)'
|
|
const loadingLabel = {
|
|
en: 'Loading',
|
|
fr: 'Chargement de',
|
|
ar: 'جارٍ تحميل',
|
|
}[language]
|
|
|
|
useEffect(() => {
|
|
setSrc(withPort(config.port, config.path))
|
|
}, [config.path, config.port])
|
|
|
|
return (
|
|
<main className="bg-stone-950" style={{ minHeight: frameHeight }}>
|
|
{src ? (
|
|
<iframe
|
|
title={config.label}
|
|
src={src}
|
|
className="w-full border-0 bg-white"
|
|
style={{ height: frameHeight }}
|
|
/>
|
|
) : (
|
|
<div className="flex items-center justify-center text-sm text-stone-300" style={{ height: frameHeight }}>
|
|
{loadingLabel} {config.label}…
|
|
</div>
|
|
)}
|
|
</main>
|
|
)
|
|
}
|