227 lines
10 KiB
TypeScript
227 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useState } from "react";
|
|
import { Plus, ChevronDown } from "lucide-react";
|
|
import { initialLanguageValues } from "@/constants/constant";
|
|
|
|
export default function LanguagePortal() {
|
|
|
|
|
|
const [languageValues, setLanguageValues] = useState(initialLanguageValues);
|
|
|
|
|
|
return (
|
|
<div className="my-15 text-slate-100 font-sans ">
|
|
{/* --- HEADER SECTION --- */}
|
|
<div className="mb-6">
|
|
<div className="flex items-center gap-2 text-[12px] font-bold tracking-widest uppercase font-mono text-slate-400 mb-1">
|
|
<span className="text-gray-400">PLATFORM</span>
|
|
<span className="text-gray-600" >•</span>
|
|
<span className="text-gray-400">LANGUAGE</span>
|
|
</div>
|
|
<h1 className="text-2xl font-bold text-white tracking-tight">Language</h1>
|
|
<p className="text-sm font-medium text-slate-400 mt-1 max-w-3xl leading-relaxed">
|
|
Manage translation keys across apps, menus and screens — then resolve their values per tenant.
|
|
</p>
|
|
</div>
|
|
|
|
{/* --- FORM SECTION: LANGUAGE KEY MASTER --- */}
|
|
<div className=" border border-slate-800/80 rounded-xl
|
|
p-3 mb-6 shadow-xl backdrop-blur-sm">
|
|
<div className="mb-5">
|
|
<h2 className="text-base font-semibold text-white tracking-tight">
|
|
Language key master
|
|
</h2>
|
|
<p className="text-xs font-mono text-slate-400 mt-0.5">
|
|
Scope a translation key to an app, menu and screen
|
|
</p>
|
|
</div>
|
|
|
|
<form className="space-y-4">
|
|
{/* Top Row Selects */}
|
|
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<div>
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
APP
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
|
|
|
|
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
|
>
|
|
<option value="Web Console">Web Console</option>
|
|
<option value="Mobile App">Mobile App</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
MENU
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
|
|
|
|
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
|
>
|
|
<option value="Tenant">Tenant</option>
|
|
<option value="Site">Site</option>
|
|
<option value="Inspections">Inspections</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
SCREEN
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
|
|
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
|
>
|
|
<option value="Tenant List">Tenant List</option>
|
|
<option value="Site List">Site List</option>
|
|
<option value="QR Round">QR Round</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Bottom Row Inputs & Action Button */}
|
|
<div className="grid grid-cols-1 md:grid-cols-12 gap-4 items-end">
|
|
<div className="md:col-span-4">
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
UI KEY
|
|
</label>
|
|
<input
|
|
type="text"
|
|
|
|
placeholder="e.g. btn.add_tenant"
|
|
className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 font-mono focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
CODE
|
|
</label>
|
|
<div className="relative">
|
|
<select
|
|
|
|
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
|
>
|
|
<option value="en">en</option>
|
|
<option value="es">es</option>
|
|
<option value="fr">fr</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="md:col-span-4">
|
|
<label className="block text-[11px] font-mono tracking-wider text-slate-400 uppercase mb-1.5">
|
|
VALUE
|
|
</label>
|
|
<input
|
|
type="text"
|
|
|
|
placeholder="e.g. Add Tenant"
|
|
className="w-full bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-2 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 placeholder:text-slate-600"
|
|
/>
|
|
</div>
|
|
|
|
<div className="md:col-span-2">
|
|
<button
|
|
type="submit"
|
|
className="w-full bg-[#1DE9B6] hover:bg-[#19d4a5] text-slate-950 font-semibold text-sm px-4 py-2 rounded-lg flex items-center justify-center gap-1.5 transition-colors shadow-lg shadow-teal-500/10 cursor-pointer"
|
|
>
|
|
<Plus className="w-4 h-4 stroke-[2.5]" />
|
|
<span>Add</span>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
|
|
{/* --- TABLE SECTION: LANGUAGE VALUES --- */}
|
|
<div className=" border border-slate-800/80 rounded-xl p-3 shadow-xl
|
|
backdrop-blur-sm">
|
|
{/* Table Header Controls */}
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4 mb-2">
|
|
<div>
|
|
<h2 className="text-base font-semibold text-white tracking-tight">
|
|
Language values
|
|
</h2>
|
|
<p className="text-xs font-mono text-slate-400 mt-0.5">
|
|
Resolved strings — filtered to the selected tenant's locales
|
|
</p>
|
|
</div>
|
|
|
|
<div className="relative min-w-[180px]">
|
|
<select
|
|
|
|
className="w-full appearance-none bg-[#060B14] border border-slate-800 rounded-lg px-3.5 py-1.5 text-sm text-slate-200 focus:outline-none focus:border-teal-500/50 cursor-pointer"
|
|
>
|
|
<option value="Apple One">Apple One</option>
|
|
<option value="Tenant Two">Tenant Two</option>
|
|
</select>
|
|
<ChevronDown className="absolute right-3 top-1/2 -translate-y-1/2 w-4 h-4 text-slate-400 pointer-events-none" />
|
|
</div>
|
|
</div>
|
|
|
|
{/* Locale Tag */}
|
|
<div className="mb-4">
|
|
<span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2.5 py-0.5 rounded-full font-mono font-medium">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
|
|
EN
|
|
</span>
|
|
</div>
|
|
|
|
{/* Data Table */}
|
|
<div className="overflow-x-auto">
|
|
<table className="w-full text-left border-collapse">
|
|
<thead>
|
|
<tr className="border-b border-slate-800 text-[10px] font-mono tracking-wider text-slate-400 uppercase">
|
|
<th className="py-3 px-2 font-medium">APP</th>
|
|
<th className="py-3 px-2 font-medium">MENU</th>
|
|
<th className="py-3 px-2 font-medium">SCREEN</th>
|
|
<th className="py-3 px-2 font-medium">UI KEY</th>
|
|
<th className="py-3 px-2 font-medium">CODE</th>
|
|
<th className="py-3 px-2 font-medium">VALUE</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody className="divide-y divide-slate-800/60 text-sm">
|
|
{languageValues.map((row) => (
|
|
<tr key={row.id} className="hover:bg-slate-800/20 transition-colors">
|
|
<td className="py-3.5 px-2 font-medium text-slate-200">{row.app}</td>
|
|
<td className="py-3.5 px-2 font-medium text-slate-200">{row.menu}</td>
|
|
<td className="py-3.5 px-2 text-slate-300">{row.screen}</td>
|
|
<td className="py-3.5 px-2">
|
|
<span className="font-mono text-xs text-slate-300 bg-[#060B14] border border-slate-800/80 px-2 py-1 rounded">
|
|
{row.uiKey}
|
|
</span>
|
|
</td>
|
|
<td className="py-3.5 px-2">
|
|
<span className="inline-flex items-center gap-1.5 bg-[#0C243B] border border-sky-800/50 text-sky-400 text-xs px-2 py-0.5 rounded-full font-mono font-medium">
|
|
<span className="w-1.5 h-1.5 rounded-full bg-sky-400"></span>
|
|
{row.code}
|
|
</span>
|
|
</td>
|
|
<td className="py-3.5 px-2 font-semibold text-white">{row.value}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
</div>
|
|
);
|
|
} |