Reorganize components

2026-02-05 22:37:00 -07:00
parent db3c0274f6
commit 6f178e934f
61 changed files with 45 additions and 44 deletions
@@ -3,7 +3,7 @@
 import { memo } from "react";
 import Image from "next/image";
 import { useTranslation } from "../../../contexts/MessagesContext";
-import QuoteDecor from "../../QuoteDecor";
+import QuoteDecor from "./QuoteDecor";
 import type { QuoteBlockViewProps } from "./QuoteBlock.types";

 function QuoteBlockView({
@@ -0,0 +1,82 @@
+"use client";
+
+import { memo } from "react";
+
+interface QuoteDecorProps {
+  className?: string;
+}
+
+const QuoteDecor = memo<QuoteDecorProps>(({ className = "" }) => {
+  return (
+    <svg
+      className={`text-[var(--color-surface-inverse-brand-primary)] opacity-100 ${className}`}
+      viewBox="400 0 442 163"
+      aria-hidden="true"
+      overflow="visible"
+      preserveAspectRatio="xMinYMin meet"
+      style={{ width: "100%", height: "100%" }}
+    >
+      <g fill="currentColor">
+        {/* Mobile ellipses */}
+        <g className="md:hidden">
+          {/* First ellipse - top left */}
+          <ellipse
+            cx="490"
+            cy="80"
+            rx="300"
+            ry="100"
+            transform="rotate(-20 600 90)"
+          />
+          {/* Second ellipse - middle */}
+          <ellipse
+            cx="508"
+            cy="250"
+            rx="300"
+            ry="110"
+            transform="rotate(-25 600 90)"
+          />
+          {/* Third ellipse - bottom right */}
+          <ellipse
+            cx="550"
+            cy="420"
+            rx="300"
+            ry="120"
+            transform="rotate(-25 600 90)"
+          />
+        </g>
+
+        {/* MD+ ellipses */}
+        <g className="hidden md:block">
+          {/* First ellipse - top left */}
+          <ellipse
+            cx="590"
+            cy="70"
+            rx="300"
+            ry="110"
+            transform="rotate(-30 600 90)"
+          />
+          {/* Second ellipse - middle */}
+          <ellipse
+            cx="680"
+            cy="250"
+            rx="300"
+            ry="110"
+            transform="rotate(-30 600 90)"
+          />
+          {/* Third ellipse - bottom right */}
+          <ellipse
+            cx="670"
+            cy="400"
+            rx="300"
+            ry="120"
+            transform="rotate(-30 600 90)"
+          />
+        </g>
+      </g>
+    </svg>
+  );
+});
+
+QuoteDecor.displayName = "QuoteDecor";
+
+export default QuoteDecor;