feat(workbench): refine feature detail popover

2026-07-10 18:44:07 +08:00
parent 66de96d9e4
commit 2258177726
4 changed files with 478 additions and 30 deletions
@@ -0,0 +1,80 @@
+import type { ReactNode, SVGProps } from "react";
+
+export type DrainageFeatureIconProps = SVGProps<SVGSVGElement> & {
+  size?: number;
+};
+
+type DrainageIconFrameProps = DrainageFeatureIconProps & {
+  children: ReactNode;
+};
+
+function DrainageIconFrame({ children, size = 20, ...props }: DrainageIconFrameProps) {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="1.8"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      focusable="false"
+      {...props}
+    >
+      {children}
+    </svg>
+  );
+}
+
+export function ConduitFeatureIcon(props: DrainageFeatureIconProps) {
+  return (
+    <DrainageIconFrame {...props}>
+      <circle cx="3.5" cy="12" r="1.75" />
+      <circle cx="20.5" cy="12" r="1.75" />
+      <path d="M5.25 9.5h13.5M5.25 14.5h13.5" />
+    </DrainageIconFrame>
+  );
+}
+
+export function JunctionFeatureIcon(props: DrainageFeatureIconProps) {
+  return (
+    <DrainageIconFrame {...props}>
+      <circle cx="12" cy="12" r="5" />
+      <circle cx="12" cy="12" r="1.75" />
+      <path d="M12 2.5V7M2.5 12H7M17 12h4.5M12 17v4.5" />
+    </DrainageIconFrame>
+  );
+}
+
+export function OrificeFeatureIcon(props: DrainageFeatureIconProps) {
+  return (
+    <DrainageIconFrame {...props}>
+      <path d="M2.5 12H9M15 12h6.5" />
+      <path d="M9.5 4v5.35M9.5 14.65V20M14.5 4v5.35M14.5 14.65V20" />
+      <circle cx="12" cy="12" r="3" />
+    </DrainageIconFrame>
+  );
+}
+
+export function PumpFeatureIcon(props: DrainageFeatureIconProps) {
+  return (
+    <DrainageIconFrame {...props}>
+      <circle cx="9.5" cy="13.5" r="6" />
+      <circle cx="9.5" cy="13.5" r="1.25" />
+      <path d="M9.5 12.25V8.5M10.75 13.5h3.75M8.65 14.4 6.2 16.85" />
+      <path d="M9.5 7.5V3.5h10v5M3.5 13.5H1.75" />
+      <path d="m17 6 2.5 2.5L22 6" />
+    </DrainageIconFrame>
+  );
+}
+
+export function OutfallFeatureIcon(props: DrainageFeatureIconProps) {
+  return (
+    <DrainageIconFrame {...props}>
+      <path d="M4 4.5h10v7h5" />
+      <path d="m16.5 8.75 2.75 2.75-2.75 2.75" />
+      <path d="M3 18c1.5-1.25 3-1.25 4.5 0s3 1.25 4.5 0 3-1.25 4.5 0 3 1.25 4.5 0M5 21c1.15-.75 2.3-.75 3.45 0s2.3.75 3.45 0 2.3-.75 3.45 0 2.3.75 3.45 0" />
+    </DrainageIconFrame>
+  );
+}