76 lines
2.2 KiB
TypeScript
76 lines
2.2 KiB
TypeScript
import { buildColorTokens } from "../colorTokens";
|
||
import { useTheme } from "../ThemeContext";
|
||
import { formatHex, Oklch } from "culori";
|
||
|
||
const SearchBar = ({ baseColor }: { baseColor: Oklch }) => {
|
||
const { theme } = useTheme();
|
||
const tokens = buildColorTokens(baseColor)[theme];
|
||
|
||
return (
|
||
<div
|
||
className="w-full h-18 flex items-center justify-center rounded-md"
|
||
style={{ backgroundColor: formatHex(tokens.background) }}
|
||
>
|
||
<input
|
||
type="text"
|
||
placeholder="搜索"
|
||
className="w-2/3 h-10 rounded-lg focus:outline-none text-center"
|
||
style={{
|
||
backgroundColor: formatHex(tokens["bg-elevated-1"]),
|
||
border: `2px solid ${formatHex(tokens["border-var-1"])}`,
|
||
color: formatHex(tokens["body-text"])
|
||
}}
|
||
/>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Paragraph = ({ baseColor }: { baseColor: Oklch }) => {
|
||
const { theme } = useTheme();
|
||
const tokens = buildColorTokens(baseColor)[theme];
|
||
|
||
return (
|
||
<div
|
||
className="w-full h-18 flex items-center justify-center rounded-md"
|
||
style={{ backgroundColor: formatHex(tokens.background) }}
|
||
>
|
||
<p style={{ color: formatHex(tokens["body-text"]) }}>
|
||
《尘海绘仙缘》是洛凛于 2024 年 12 月 15 日投稿至哔哩哔哩的 Synthesizer V 中文原创歌曲, 由赤羽演唱。
|
||
</p>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const Buttons = ({ baseColor }: { baseColor: Oklch }) => {
|
||
const { theme } = useTheme();
|
||
const tokens = buildColorTokens(baseColor)[theme];
|
||
|
||
return (
|
||
<div
|
||
className="w-full h-18 flex items-center justify-center rounded-md gap-4 px-10"
|
||
style={{ backgroundColor: formatHex(tokens.background) }}
|
||
>
|
||
<button
|
||
className="cursor-pointer font-medium py-1.5 px-4 rounded-lg border-2"
|
||
style={{ borderColor: formatHex(tokens["border-var-3"]), color: formatHex(tokens["on-bg-var-2"]) }}
|
||
>
|
||
Cancel
|
||
</button>
|
||
<button
|
||
className="cursor-pointer font-medium py-2 px-4 rounded-lg"
|
||
style={{ backgroundColor: formatHex(tokens.primary), color: formatHex(tokens["on-primary"]) }}
|
||
>
|
||
Confirm
|
||
</button>
|
||
<button
|
||
className="cursor-pointer font-medium py-2 px-4 rounded-lg"
|
||
style={{ backgroundColor: formatHex(tokens.error), color: formatHex(tokens["on-error"]) }}
|
||
>
|
||
Delete
|
||
</button>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
export { SearchBar, Paragraph, Buttons };
|