dekun
e71baad554
Correct yin-yang eye colors with contrast strokes, and show light/dark switch in mobile header with Chinese labels. Co-authored-by: Cursor <cursoragent@cursor.com>
89 lines
2.3 KiB
TypeScript
89 lines
2.3 KiB
TypeScript
import React from "react";
|
|
import { cn } from "@/lib/utils";
|
|
|
|
/** 太极阴阳鱼图标（页眉 Logo）— 亮色模式描边保证阴阳分界可见 */
|
|
export const TaijiIcon = React.memo(function TaijiIcon({
|
|
className,
|
|
}: {
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 64 64"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={cn("h-7 w-7 shrink-0", className)}
|
|
aria-hidden
|
|
>
|
|
<circle
|
|
cx="32"
|
|
cy="32"
|
|
r="30"
|
|
className="fill-white stroke-stone-600 stroke-[1.5] dark:fill-stone-200 dark:stroke-stone-400"
|
|
/>
|
|
<path
|
|
d="M32 2a30 30 0 0 1 0 60 15 15 0 0 1 0-30 15 15 0 0 0 0-30z"
|
|
className="fill-stone-800 dark:fill-stone-900"
|
|
/>
|
|
{/* 阳中有阴 — 鱼眼在阳面，填深色 */}
|
|
<circle
|
|
cx="32"
|
|
cy="17"
|
|
r="5"
|
|
className="fill-stone-800 stroke-white stroke-[0.75] dark:fill-stone-900 dark:stroke-stone-200"
|
|
/>
|
|
{/* 阴中有阳 — 鱼眼在阴面，填浅色 */}
|
|
<circle
|
|
cx="32"
|
|
cy="47"
|
|
r="5"
|
|
className="fill-white stroke-stone-800 stroke-[0.75] dark:fill-stone-200 dark:stroke-stone-900"
|
|
/>
|
|
</svg>
|
|
);
|
|
});
|
|
|
|
/** 背景用水印版太极 */
|
|
export function TaijiWatermark({
|
|
className,
|
|
}: {
|
|
className?: string;
|
|
}) {
|
|
return (
|
|
<svg
|
|
viewBox="0 0 200 200"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
className={className}
|
|
aria-hidden
|
|
>
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="98"
|
|
className="fill-none stroke-stone-400/30 stroke-[0.75] dark:stroke-stone-500/25"
|
|
/>
|
|
<circle
|
|
cx="100"
|
|
cy="100"
|
|
r="98"
|
|
className="fill-white/40 dark:fill-stone-200/10"
|
|
/>
|
|
<path
|
|
d="M100 2a98 98 0 0 1 0 196 49 49 0 0 1 0-98 49 49 0 0 0 0-98z"
|
|
className="fill-stone-600/10 dark:fill-stone-300/12"
|
|
/>
|
|
<circle
|
|
cx="100"
|
|
cy="51"
|
|
r="10"
|
|
className="fill-stone-600/25 stroke-white/50 stroke-[0.5] dark:fill-stone-400/20 dark:stroke-stone-200/30"
|
|
/>
|
|
<circle
|
|
cx="100"
|
|
cy="149"
|
|
r="10"
|
|
className="fill-white/50 stroke-stone-600/20 stroke-[0.5] dark:fill-stone-200/25 dark:stroke-stone-900/30"
|
|
/>
|
|
</svg>
|
|
);
|
|
}
|