continue re-design

2025-09-05 13:06:17 -04:00
parent b96d048dbd
commit 836b085f75
270 changed files with 32269 additions and 5182 deletions
@@ -0,0 +1,185 @@
+import { cn } from "@/utils/cn";
+
+import Curve from "@/components/shared/icons/curve";
+
+interface CurvyRectProps extends React.HTMLAttributes<HTMLDivElement> {
+  allSides?: boolean;
+
+  x?: boolean;
+  y?: boolean;
+
+  left?: boolean;
+  right?: boolean;
+  top?: boolean;
+  bottom?: boolean;
+
+  topLeft?: boolean;
+  topRight?: boolean;
+  bottomLeft?: boolean;
+  bottomRight?: boolean;
+}
+
+export default function CurvyRect({
+  className,
+  allSides,
+  x,
+  y,
+  left,
+  right,
+  top,
+  bottom,
+  topLeft,
+  topRight,
+  bottomLeft,
+  bottomRight,
+  ...props
+}: CurvyRectProps) {
+  const hasTopLeft = topLeft || top || left || x || allSides;
+  const hasTopRight = topRight || top || right || x || allSides;
+  const hasBottomLeft = bottomLeft || bottom || left || y || allSides;
+  const hasBottomRight = bottomRight || bottom || right || y || allSides;
+
+  return (
+    <div
+      className={cn(
+        className,
+        "pointer-events-none contain-[layout,paint] curvy-rect",
+      )}
+      {...props}
+    >
+      {hasTopLeft && <Curve className="-rotate-90 absolute top-0 left-0" />}
+      {hasTopRight && <Curve className="absolute top-0 right-0" />}
+      {hasBottomLeft && (
+        <Curve className="rotate-180 absolute bottom-0 left-0" />
+      )}
+      {hasBottomRight && (
+        <Curve className="rotate-90 absolute bottom-0 right-0" />
+      )}
+    </div>
+  );
+}
+
+export const Connector = ({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      height="21"
+      viewBox="0 0 22 21"
+      width="22"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn(
+        "pointer-events-none contain-[layout,paint] absolute",
+        className,
+      )}
+    >
+      <path
+        d="M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorToRight = ({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      height="21"
+      viewBox="0 0 11 21"
+      width="11"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn(
+        "pointer-events-none contain-[layout,paint] absolute",
+        className,
+      )}
+    >
+      <path
+        d="M1 4C1 7.31371 3.68629 10 7 10H11V11H7C3.68629 11 1 13.6863 1 17V21H0V0H1V4Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorToLeft = ({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      height="21"
+      viewBox="0 0 11 21"
+      width="11"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn(
+        "pointer-events-none contain-[layout,paint] absolute",
+        className,
+      )}
+    >
+      <path
+        d="M11 21H10V17C10 13.6863 7.31371 11 4 11H0V10H4C7.31371 10 10 7.31371 10 4V0H11V21Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorToTop = ({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      height="11"
+      viewBox="0 0 21 11"
+      width="21"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn(
+        "pointer-events-none contain-[layout,paint] absolute",
+        className,
+      )}
+    >
+      <path
+        d="M11 4C11 7.31371 13.6863 10 17 10H21V11H0V10H4C7.31371 10 10 7.31371 10 4V0H11V4Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  );
+};
+
+export const ConnectorToBottom = ({
+  className,
+  ...props
+}: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg
+      fill="none"
+      height="11"
+      viewBox="0 0 21 11"
+      width="21"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+      className={cn(
+        "pointer-events-none contain-[layout,paint] absolute",
+        className,
+      )}
+    >
+      <path
+        d="M11 7C11 3.68629 13.6863 1 17 1H21V0H0V1H4C7.31371 1 10 3.68629 10 7V11H11V7Z"
+        fill="#EDEDED"
+      />
+    </svg>
+  );
+};