glorious new db

1 files changed, 250 insertions, 0 deletions

diff --git a/src/components/lang/ThaiPhonology.tsx b/src/components/lang/ThaiPhonology.tsx
new file mode 100644
index 0000000..199d0b8
--- /dev/null
+++ b/src/components/lang/ThaiPhonology.tsx
@@ -0,0 +1,250 @@
+// import React from "react";
+
+// /**
+//  * ThaiConsonantGrid – a visual table of Thai consonants modelled after the
+//  * traditional Sanskrit‑style chart.  Each cell shows the Thai glyph and its
+//  * IPA.  Rows are places of articulation, columns are manners.  Colours follow
+//  * the pedagogical convention from the reference screenshot.
+//  */
+// export default function ThaiConsonantGrid() {
+//   /** Column headers in display order */
+//   const cols = [
+//     "stopped",
+//     "aspirated",
+//     "voiced",
+//     "voiced‑aspirated",
+//     "nasal",
+//     "semiVowel",
+//     "sibilant",
+//     "H‑aspirate",
+//     "throatBase",
+//     "others",
+//   ] as const;
+
+//   /** Row headers in display order */
+//   const rows = [
+//     "Deep Throat",
+//     "guttural",
+//     "palatal",
+//     "cerebral",
+//     "dental",
+//     "labial",
+//   ] as const;
+//   type ArticulationPoint =
+//     | "bilabial"
+//     | "labiodental"
+//     | "dental"
+//     | "alveolar"
+//     | "postalveolar"
+//     | "retroflex"
+//     | "palatal"
+//     | "velar"
+//     | "uvular"
+//     | "pharyngeal"
+//     | "glottal";
+//   type ArticulationMode =
+//     | "plosive"
+//     | "nasal"
+//     | "trill"
+//     | "flap"
+//     | "fricative"
+//     | "affricate"
+//     | "lateral fricative"
+//     | "approximant"
+//     | "lateral approximant";
+//   type Voicing = "unvoiced" | "voiced" | "aspirated" | "voiced aspirated";
+//   type VowelHeight = "high" | "close-mid" | "open-mid" | "open";
+//   type VowelFront = "front" | "central" | "back";
+//   type VowelRound = "rounded" | "unrounded";
+
+//   /**
+//    * Minimal description for each consonant we want to render.  Position is
+//    * given by its (rowIdx, colIdx).  The colour is a Tailwind background class
+//    * so you can tweak the palette in one place.
+//    */
+//   interface Cell {
+//     row: number; // 0‑based index into rows
+//     col: number; // 0‑based index into cols
+//     glyph: string;
+//     ipa: string;
+//     colour: string; // Tailwind bg‑* class
+//     highlight?: boolean; // optional neon border
+//     class: "high" | "mid" | "low";
+//   }
+
+//   const cells: Cell[] = [
+//     // ───────────────────── guttural row (index 1) ──────────────────────
+//     {
+//       row: 1,
+//       col: 0,
+//       glyph: "ก",
+//       class: "high",
+//       ipa: "/k/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 1,
+//       glyph: "ข",
+//       class: "high",
+//       ipa: "/kʰ/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 1,
+//       glyph: "ฃ",
+//       class: "high",
+//       ipa: "/kʰ/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 2,
+//       glyph: "ค",
+//       class: "high",
+//       ipa: "/kʰ/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 2,
+//       glyph: "ฅ",
+//       class: "high",
+//       ipa: "/kʰ/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 2,
+//       glyph: "ฆ",
+//       class: "high",
+//       ipa: "/kʰ/",
+//       colour: "bg-sky-500",
+//     },
+//     {
+//       row: 1,
+//       col: 4,
+//       glyph: "ง",
+//       ipa: "/ŋ/",
+//       colour: "bg-sky-500",
+//       highlight: true,
+//     },
+
+//     // ───────────────────── palatal row (index 2) ───────────────────────
+//     { row: 2, col: 0, glyph: "จ", ipa: "/tɕ/", colour: "bg-pink-500" },
+//     { row: 2, col: 1, glyph: "ฉ", ipa: "/tɕʰ/", colour: "bg-pink-500" },
+//     { row: 2, col: 2, glyph: "ช", ipa: "/tɕʰ/", colour: "bg-pink-500" },
+//     { row: 2, col: 2, glyph: "ซ", ipa: "/s/", colour: "bg-pink-500" },
+//     { row: 2, col: 3, glyph: "ฌ", ipa: "/tɕʰ/", colour: "bg-pink-500" },
+//     { row: 2, col: 5, glyph: "ญ", ipa: "/j/", colour: "bg-pink-500" },
+
+//     // ───────────────────── cerebral row (index 3) ──────────────────────
+//     { row: 3, col: 0, glyph: "ฎ", ipa: "/d/", colour: "bg-emerald-700" },
+//     { row: 3, col: 0, glyph: "ฐ", ipa: "/t/", colour: "bg-emerald-700" },
+//     { row: 3, col: 1, glyph: "ฏ", ipa: "/tʰ/", colour: "bg-emerald-700" },
+//     {
+//       row: 3,
+//       col: 4,
+//       glyph: "ฑ",
+//       ipa: "/tʰ or d/",
+//       colour: "bg-emerald-700",
+//       highlight: true,
+//     },
+//     { row: 3, col: 3, glyph: "ฒ", ipa: "/tʰ/", colour: "bg-emerald-700" },
+//     { row: 3, col: 4, glyph: "ณ", ipa: "/n/", colour: "bg-emerald-700" },
+//     { row: 3, col: 5, glyph: "ศ", ipa: "/s/", colour: "bg-emerald-700" },
+//     { row: 3, col: 5, glyph: "ษ", ipa: "/s/", colour: "bg-emerald-700" },
+
+//     // ───────────────────── dental row (index 4) ────────────────────────
+//     { row: 4, col: 0, glyph: "ต", ipa: "/d/", colour: "bg-emerald-600" },
+//     { row: 4, col: 0, glyph: "ถ", ipa: "/t/", colour: "bg-emerald-600" },
+//     { row: 4, col: 1, glyph: "ท", ipa: "/tʰ/", colour: "bg-emerald-600" },
+//     { row: 4, col: 2, glyph: "ธ", ipa: "/tʰ/", colour: "bg-emerald-600" },
+//     { row: 4, col: 4, glyph: "น", ipa: "/n/", colour: "bg-emerald-600" },
+//     { row: 4, col: 6, glyph: "ส", ipa: "/s/", colour: "bg-emerald-600" },
+
+//     // ───────────────────── labial row (index 5) ────────────────────────
+//     { row: 5, col: 0, glyph: "บ", ipa: "/b/", colour: "bg-orange-500" },
+//     { row: 5, col: 0, glyph: "ป", ipa: "/p/", colour: "bg-orange-500" },
+//     { row: 5, col: 1, glyph: "ผ", ipa: "/pʰ/", colour: "bg-orange-500" },
+//     { row: 5, col: 2, glyph: "พ", ipa: "/pʰ/", colour: "bg-orange-500" },
+//     { row: 5, col: 2, glyph: "ฟ", ipa: "/f/", colour: "bg-orange-500" },
+//     { row: 5, col: 3, glyph: "ภ", ipa: "/pʰ/", colour: "bg-orange-500" },
+//     { row: 5, col: 4, glyph: "ม", ipa: "/m/", colour: "bg-orange-500" },
+//     {
+//       row: 5,
+//       col: 9,
+//       glyph: "ฟฬ",
+//       ipa: "/l/",
+//       colour: "bg-emerald-600",
+//       highlight: true,
+//     },
+
+//     // ───────────────────── extra column (index^?) – throat + others ─────
+//     { row: 1, col: 7, glyph: "ห", ipa: "/h/", colour: "bg-gray-400" },
+//     { row: 1, col: 8, glyph: "อ", ipa: "/ʔ/", colour: "bg-gray-400" },
+//   ];
+
+//   return (
+//     <div className="overflow-x-auto p-4">
+//       {/* Column header */}
+//       <div
+//         className="grid"
+//         style={{
+//           gridTemplateColumns: `auto repeat(${cols.length}, minmax(4rem, 1fr))`,
+//         }}
+//       >
+//         {/* top‑left empty cell */}
+//         <div />
+//         {cols.map((c) => (
+//           <div
+//             key={c}
+//             className="bg-neutral-800 text-amber-300 text-center uppercase py-2 text-sm font-semibold border border-neutral-700"
+//           >
+//             {c}
+//           </div>
+//         ))}
+
+//         {/* rows */}
+//         {rows.map((rowLabel, ri) => (
+//           <React.Fragment key={rowLabel}>
+//             {/* row header */}
+//             <div className="bg-neutral-900 text-amber-300 flex items-center justify-center px-2 py-1 text-xs font-bold whitespace-nowrap border border-neutral-700">
+//               {rowLabel}
+//             </div>
+//             {/* cells within the row */}
+//             {cols.map((_, ci) => {
+//               // We may have multiple consonants per slot; gather them.
+//               const here = cells.filter((c) => c.row === ri && c.col === ci);
+//               if (here.length === 0)
+//                 return <div key={ci} className="border border-neutral-700" />;
+
+//               return (
+//                 <div
+//                   key={ci}
+//                   className={[
+//                     "border border-neutral-700 rounded-md flex flex-col items-center justify-center gap-1 p-1 text-white",
+//                     here[0].colour,
+//                     here.some((c) => c.highlight)
+//                       ? "ring-2 ring-green-400"
+//                       : "",
+//                   ].join(" ")}
+//                 >
+//                   {here.map((c, i) => (
+//                     <span key={i} className="text-sm leading-tight text-center">
+//                       <span className="block text-lg font-semibold">
+//                         {c.glyph}
+//                       </span>
+//                       <span className="block text-xs">{c.ipa}</span>
+//                     </span>
+//                   ))}
+//                 </div>
+//               );
+//             })}
+//           </React.Fragment>
+//         ))}
+//       </div>
+//     </div>
+//   );
+// }