49 lines
1.4 KiB
TypeScript
49 lines
1.4 KiB
TypeScript
"use client";
|
|
|
|
import { Check } from "lucide-react";
|
|
|
|
import {
|
|
AYANAMSA_OPTIONS,
|
|
AYANAMSA_SWITCH_HINT,
|
|
type AyanamsaName,
|
|
} from "@/lib/ayanamsa";
|
|
|
|
export function AyanamsaPreferenceField({
|
|
value,
|
|
onChange,
|
|
}: {
|
|
readonly value: AyanamsaName;
|
|
readonly onChange: (next: AyanamsaName) => void;
|
|
}) {
|
|
return (
|
|
<section className="sheet-section" aria-labelledby="ayanamsa-preference-title">
|
|
<div className="section-heading">
|
|
<b id="ayanamsa-preference-title">岁差</b>
|
|
<small>用来把黄道转成印度占星用的恒星黄道</small>
|
|
</div>
|
|
<div className="theme-preference-options" role="radiogroup" aria-labelledby="ayanamsa-preference-title">
|
|
{AYANAMSA_OPTIONS.map((option) => {
|
|
const selected = value === option.value;
|
|
return (
|
|
<button
|
|
className="theme-preference-option ayanamsa-preference-option"
|
|
key={option.value}
|
|
type="button"
|
|
role="radio"
|
|
aria-checked={selected}
|
|
onClick={() => onChange(option.value)}
|
|
>
|
|
<span>
|
|
{option.label}
|
|
<small>{option.description}</small>
|
|
</span>
|
|
{selected ? <Check aria-hidden="true" /> : null}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
<p className="ayanamsa-preference-hint">{AYANAMSA_SWITCH_HINT}</p>
|
|
</section>
|
|
);
|
|
}
|