This commit is contained in:
adueck 2023-07-10 16:17:40 +04:00
parent a3cefdb627
commit 72823ed4c8
2 changed files with 41 additions and 30 deletions

View File

@ -1,5 +1,6 @@
import { useState } from "react"; import { useState } from "react";
import { tenseData } from "./tense-data"; import { tenseData } from "./tense-data";
import Media from "react-media";
function SwitchPlayground() { function SwitchPlayground() {
const [state, setState] = useState<[boolean, boolean, boolean]>([false, false, false]); const [state, setState] = useState<[boolean, boolean, boolean]>([false, false, false]);
@ -44,33 +45,39 @@ function Switch({ state, toggle, label }: { label: [string, string], state: bool
const border = "solid 2px black"; const border = "solid 2px black";
return <div> return <div>
<div>{label[0]}</div> <div>{label[0]}</div>
<div className="clickable" onClick={toggle} style={{ <Media queries={{
border, small: "(max-width: 599px)",
height: "8rem",
borderRadius,
position: "relative",
}}> }}>
<div style={{ {matches => (
border, <div className="clickable" onClick={toggle} style={{
borderRadius, border,
height: "50%", height: matches.small ? "6rem" : "9rem",
width: "25%", borderRadius,
top: "50%", position: "relative",
transform: "translateY(-50%) translateX(150%)", }}>
position: "absolute", <div style={{
}}>
<div
style={{
border, border,
borderRadius, borderRadius,
width: "50%", height: "50%",
top: state ? "75%" : "25%", width: "33%",
transform: "translateY(-50%) translateX(55%)", top: "50%",
transform: "translateY(-50%) translateX(105%)",
position: "absolute", position: "absolute",
}} }}>
/> <div
</div> style={{
</div> border,
borderRadius,
width: "50%",
top: state ? "75%" : "25%",
transform: "translateY(-50%) translateX(55%)",
position: "absolute",
}}
/>
</div>
</div>
)}
</Media>
<div>{label[1]}</div> <div>{label[1]}</div>
</div> </div>
} }

View File

@ -101,11 +101,11 @@ We can use **any possible** combination of these 3 choices, giving us:
Here's a chart of every possible combination of these choices, giving us all the basic verb forms: Here's a chart of every possible combination of these choices, giving us all the basic verb forms:
<div style={{ overflowX: "auto", marginBottom: "1em" }}> <div style={{ overflowX: "auto", marginBottom: "1em" }}>
<table class="table table-bordered table-striped" style={{ minWidth: "500px" }}> <table class="table table-bordered table-striped" style={{ minWidth: "425px" }}>
<thead> <thead>
<tr> <tr>
<th>form</th> <th>form</th>
<th scope="col">has 'ba'</th> <th scope="col">Has 'ba'</th>
<th scope="col">Imperfective / Perfective</th> <th scope="col">Imperfective / Perfective</th>
<th scope="col">Stem / Root</th> <th scope="col">Stem / Root</th>
</tr> </tr>
@ -114,21 +114,23 @@ Here's a chart of every possible combination of these choices, giving us all the
{tenseData.map((t) => ( {tenseData.map((t) => (
<tr> <tr>
<td>{t[0]}</td> <td>{t[0]}</td>
<td>{t[1] ? "Y" : "N"}</td> <td>{t[1] ? "yes" : "no"}</td>
<td>{t[2] ? "Imperfective" : "Perfective"}</td> <td>{t[2] ? <div><Video />{` `}imperfective</div> : <div><Camera />{` `}perfective</div>}</td>
<td>{t[3] ? "Stem" : "Root"}</td> <td>{t[3] ? "stem" : "root"}</td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div> </div>
Try the combinations yourself! Hit the switches to try the combinations yourself!
<SwitchPlayground /> <SwitchPlayground />
## Imperative Forms ## Imperative Forms
Imperative forms are slightly different...
<table class="table table-bordered"> <table class="table table-bordered">
<thead> <thead>
<tr> <tr>
@ -167,11 +169,13 @@ Try the combinations yourself!
## Perfect Verb Forms ## Perfect Verb Forms
Perfect verb forms are built with:
<div className="my-3"> <div className="my-3">
<samp>past participle + equative</samp> <samp>past participle + equative</samp>
</div> </div>
Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used. Equative may be left out with the present perfect form. Any of the <Link to="/equatives/other-equatives/#overview-of-8-equatives">8 equatives</Link> may be used to form 8 different <Link to="/verbs/all-perfect-verbs/">perfect froms</Link>. Equative may be left out with the present perfect form.
## Ability Verb Forms ## Ability Verb Forms