From 86cda450b3e7438ce96e7597fcc260fa4351e113 Mon Sep 17 00:00:00 2001 From: Triston Date: Sat, 10 Feb 2024 00:48:12 -0600 Subject: [PATCH] add thai flash cards for consonant alphabet --- pages/_app.tsx | 1 + pages/thai/index.tsx | 166 +++++++++++++++++++++++++++++++++++++++++++ styles/thai.css | 49 +++++++++++++ 3 files changed, 216 insertions(+) create mode 100644 pages/thai/index.tsx create mode 100644 styles/thai.css diff --git a/pages/_app.tsx b/pages/_app.tsx index bccde0e..7d996be 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -1,6 +1,7 @@ import '../styles/global.css' import '../styles/prism.css' import '../components/portfolio/alien_styles.css' +import '../styles/thai.css' import type { AppProps } from 'next/app' import type { HomeProps } from './notes' import React from 'react' diff --git a/pages/thai/index.tsx b/pages/thai/index.tsx new file mode 100644 index 0000000..962b989 --- /dev/null +++ b/pages/thai/index.tsx @@ -0,0 +1,166 @@ +import Head from 'next/head' +import { useState } from 'react'; + + +export default function Home() { + const [randomeLetter, setRandomLetter] = useState(_getRandomLetter()) + + function _getRandomLetter() { + return thaiConsonantsArray[Math.floor(Math.random() * thaiConsonantsArray.length)] + } + + return ( + <> + + Thai Stuff + + +
+
+

{randomeLetter.letter}

+

{randomeLetter.phono}

+
+
+ + +
+
+ + ) +} + + +const thaiConsonantsArray = [ + { + letter: 'ก', + phono: 'ko kai', + }, + { + letter: 'ข', + phono: 'kho khai', + }, + { + letter: 'คง', + phono: 'kho khon', + }, + { + letter: 'ง', + phono: 'ngo ngoo', + }, + { + letter: 'จ', + phono: 'cho chan', + }, + { + letter: 'ฉ', + phono: 'so chan', + }, + { + letter: 'ช', + phono: 'so chon', + }, + { + letter: 'ซ', + phono: 'so san', + }, + { + letter: 'ฌ', + phono: 'so cho', + }, + { + letter: 'ญ', + phono: 'yo ning', + }, + { + letter: 'ฎ', + phono: 'do dek', + }, + { + letter: 'ฏ', + phono: 'to tao', + }, + { + letter: 'ฐ', + phono: 'tho thon', + }, + { + letter: 'ฑ', + phono: 'tho thung', + }, + { + letter: 'ฒ', + phono: 'tho tho', + }, + { + letter: 'ณ', + phono: 'no nen', + }, + { + letter: 'บ', + phono: 'bo bai', + }, + { + letter: 'ป', + phono: 'po pao', + }, + { + letter: 'พ', + phono: 'pho phan', + }, + { + letter: 'ม', + phono: 'mo mi', + }, + { + letter: 'ฝ', + phono: 'fo fan', + }, + { + letter: 'ฟ', + phono: 'fo fa', + }, + { + letter: 'ภ', + phono: 'pho phran', + }, + { + letter: 'ฝ', + phono: 'fo fan', + }, + { + letter: 'ส', + phono: 'so san', + }, + { + letter: 'ศ', + phono: 'so si', + }, + { + letter: 'ษ', + phono: 'so so', + }, + { + letter: 'ส', + phono: 'so san', + }, + { + letter: 'ห', + phono: 'ho hin', + }, + { + letter: 'ฬ', + phono: 'lo ling', + }, + { + letter: 'ฮ', + phono: 'ho ho', + }, +]; diff --git a/styles/thai.css b/styles/thai.css new file mode 100644 index 0000000..09cf178 --- /dev/null +++ b/styles/thai.css @@ -0,0 +1,49 @@ +.card { + position: absolute; + top: calc(50% - 22rem); + left: calc(50% - 9rem); + width: 18rem; + height: 26rem; + padding: 10px; + background-color: rgba(255, 255, 255, 0.15); + border-radius: 10px; + display: flex; + justify-content: space-between; + align-items: center; + flex-direction: column; + border-right: 1px solid color(srgb 0.3784 0.4042 0.43); + border-top: 1px solid color(srgb 0.3784 0.4042 0.43); +} + +.card > div > p:first-of-type { + font-size: 8rem; + margin: 0; + color: #bfcedd; + text-shadow: -4px 3px 7px #121316; +} + +.card > div > p { + margin: 0; + color: #bfcedd; + text-align: center; +} + +.card > .buttons { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + padding: 0; + margin: 0; + gap: 2px; + font-size: 1.6rem; +} + +.card > .buttons > button { + flex: 1; + margin: 0; +} + +.card > .buttons > :first-child { + background: none; +}