tristonarmstrong/XeNote
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update the thai page

Browse Source
This commit is contained in:
Triston Armstrong 2024-02-13 21:29:08 -06:00
parent c3ded3cf43
commit 2fd3530911
2 changed files with 60 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

69
pages/thai/index.tsx
View File

@ -11,6 +11,35 @@ const cardSpinningTimer = {
};
export default function Home() {
return (
<>
<Head>
<title>Thai Stuff</title>
</Head>
<div style={{
display: 'grid',
gridTemplateColumns: 'repeat(5, 1fr)',
gridTemplateRows: 'repeat(2, 1fr)',
width: '100%',
gap: 8
}}>
<FlippyCard />
<div className='grey-round' style={{ gridColumn: '2 / span 4' }}>
<p></p>
</div>
<div style={{ gridRow: 2, gridColumn: '1 / span 5' }}>
<div className='grey-round' style={{ gridColumn: '1 / span 5' }}>
<p></p>
</div>
</div>
</div>
</>
)
}
function FlippyCard() {
const cardRef = useRef<HTMLDivElement>(null)
const [randomeLetter, setRandomLetter] = useState<LetterType>({
letter: 'ฮ',
@ -30,30 +59,24 @@ export default function Home() {
}
return (
<>
<Head>
<title>Thai Stuff</title>
</Head>
<div className='card' ref={cardRef}>
<div>
<p>{randomeLetter.letter}</p>
<p>{randomeLetter.phono}</p>
</div>
<div className='buttons'>
<button onClick={async () => {
console.log("pressed listen")
}}>Listen</button>
<button onClick={async () => {
let k = await _getRandomLetter()
while (k == randomeLetter) {
k = await _getRandomLetter()
}
setRandomLetter(k)
}}>Next</button>
</div>
<div className='card grey-round' ref={cardRef}>
<div>
<p>{randomeLetter.letter}</p>
<p>{randomeLetter.phono}</p>
</div>
</>
<div className='buttons'>
<button onClick={async () => {
console.log("pressed listen")
}}>Listen</button>
<button onClick={async () => {
let k = await _getRandomLetter()
while (k == randomeLetter) {
k = await _getRandomLetter()
}
setRandomLetter(k)
}}>Next</button>
</div>
</div>
)
}

28
styles/thai.css
View File

@ -1,22 +1,22 @@
.card {
position: absolute;
top: calc(50% - 22rem);
left: calc(50% - 9rem);
width: 18rem;
height: 26rem;
padding: 10px;
.grey-round {
padding: 2px;
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 {
width: 10rem;
height: 14rem;
display: flex;
justify-content: space-between;
align-items: center;
flex-direction: column;
}
.card > div > p:first-of-type {
font-size: 8rem;
font-size: 4rem;
margin: 0;
color: #bfcedd;
text-shadow: -4px 3px 7px #121316;
@ -33,10 +33,10 @@
justify-content: center;
align-items: center;
width: 100%;
padding: 0;
padding: 4px;
margin: 0;
gap: 2px;
font-size: 1.6rem;
font-size: 0.8rem;
}
.card > .buttons > button {