added site modes

frontend/src/components/react/Search.tsx

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useRef, useState } from 'react';
 import { getPosts } from '../../lib/api';
+import { type SiteMode, copy } from '../../lib/siteMode';
 
 interface Post {
   slug: string;
@@ -27,7 +28,8 @@ function formatDate(date: string) {
   });
 }
 
-export default function Search() {
+export default function Search({ mode = 'atelier' }: { mode?: SiteMode }) {
+  const c = copy(mode);
   const [open, setOpen] = useState(false);
   const [query, setQuery] = useState('');
   const [posts, setPosts] = useState<Post[] | null>(null);
@@ -128,7 +130,7 @@ export default function Search() {
       <button
         type="button"
         onClick={() => setOpen(true)}
-        aria-label={`Search the catalogue (${isMac ? '⌘' : 'Ctrl'}+K)`}
+        aria-label={`${c.searchAria} (${isMac ? '⌘' : 'Ctrl'}+K)`}
         className="topbar-control tc-collapse-md kbd-tip-host"
       >
         <svg
@@ -156,7 +158,7 @@ export default function Search() {
           className="search-overlay fixed inset-0 z-[200] flex items-start justify-center pt-[10vh] md:pt-[15vh] px-4"
           role="dialog"
           aria-modal="true"
-          aria-label="Search the catalogue"
+          aria-label={c.searchAria}
           onClick={() => setOpen(false)}
         >
           <div
@@ -194,7 +196,7 @@ export default function Search() {
                 value={query}
                 onChange={e => setQuery(e.target.value)}
                 onKeyDown={onInputKey}
-                placeholder="Search the catalogue…"
+                placeholder={`${c.searchPlaceholder}`}
                 aria-label="Search query"
                 className="search-input flex-1 bg-transparent outline-none text-base text-[var(--text)] placeholder:text-[var(--subtext0)] font-display italic"
               />
@@ -205,14 +207,14 @@ export default function Search() {
 
             <div className="flex-1 overflow-y-auto">
               {loading && (
-                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">Fetching the catalogue…</div>
+                <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">{c.searchFetching}</div>
               )}
               {error && (
                 <div className="px-4 py-8 text-center text-sm text-[var(--red)] font-display italic">{error}</div>
               )}
               {!loading && !error && posts && results.length === 0 && (
                 <div className="px-4 py-10 text-center font-display italic text-[var(--subtext0)]">
-                  {query ? 'No works match.' : 'The catalogue is empty.'}
+                  {query ? c.searchNoMatch : c.searchEmpty}
                 </div>
               )}
               {!loading && !error && results.length > 0 && (
@@ -236,7 +238,7 @@ export default function Search() {
                             <span className="truncate">{title}</span>
                             {p.draft && (
                               <span className="chip chip-draft shrink-0 !text-[0.62rem] !py-0">
-                                Sketch
+                                {c.draftShort}
                               </span>
                             )}
                           </div>