Move MeshDecoration to a .tsx file

packages/components/src/components/product-card/index.tsx

@@ -2,9 +2,9 @@ import { cn } from '../../cn';
 import { FOUR_MAIN_PRODUCTS, ProductInfo, PRODUCTS } from '../../products';
 import { HighlightDecoration } from '../decorations';
 import { ArrowIcon } from '../icons';
+import { MeshDecoration } from './mesh-decoration';
 import { ReactComponent as HiveDecoration } from './hive-decoration.svg';
 import { ReactComponent as HiveGatewayDecoration } from './hive-gateway-decoration.svg';
-import { ReactComponent as MeshDecoration } from './mesh-decoration.svg';
 import { ReactComponent as YogaDecoration } from './yoga-decoration.svg';
 
 const cardDecorations = {

packages/components/src/components/product-card/mesh-decoration.tsx

@@ -0,0 +1,69 @@
+'use client';
+
+import { useId } from 'react';
+
+/**
+ * This component can't be moved to .svg file, because SVGR doesn't use `React.useId()`,
+ * and we use this decoration inside of UI that can have `display: none`, which affects
+ * colliding SVG ids.
+ */
+export function MeshDecoration(props: React.SVGProps<SVGSVGElement>) {
+  const maskId = useId();
+  const gradientOneId = useId();
+  const gradientTwoId = useId();
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 156 172" fill="none" {...props}>
+      <mask
+        id={maskId}
+        maskUnits="userSpaceOnUse"
+        x="0"
+        y="-75"
+        width="248"
+        height="248"
+        fill="black"
+      >
+        <rect fill="white" y="-75" width="248" height="248" />
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z"
+        />
+      </mask>
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M213.474 -37.2159L246.99 -3.69922H247V101.699L213.483 135.216L210.216 138.483L176.699 172H71.3008L37.7841 138.483L34.5167 135.216L1 101.699V-3.69922L34.5071 -37.2159L37.7745 -40.4833L71.2912 -74H176.69L210.206 -40.4833L213.474 -37.2159ZM56.9474 135.206H191.043C201.631 135.206 210.206 126.631 210.206 116.043V-18.0526C210.206 -28.6403 201.631 -37.2159 191.043 -37.2159H56.9474C46.3597 -37.2159 37.7841 -28.6403 37.7841 -18.0526V116.043C37.7841 126.631 46.3597 135.206 56.9474 135.206ZM70.9266 83.0905V14.8977C70.9266 4.30997 79.5022 -4.26562 90.09 -4.26562H157.9C168.487 -4.26562 177.063 4.30997 177.063 14.8977V83.0905C177.063 93.6783 168.487 102.254 157.9 102.254H90.09C79.5022 102.254 70.9266 93.6783 70.9266 83.0905ZM140.279 65.4698V32.5184H107.711V65.4698H140.279Z"
+        fill={`url(#${gradientOneId})`}
+      />
+      <path
+        d="M246.99 -3.69922L246.637 -3.34566L246.783 -3.19922H246.99V-3.69922ZM213.474 -37.2159L213.827 -37.5695L213.474 -37.2159ZM247 -3.69922H247.5V-4.19922H247V-3.69922ZM247 101.699L247.354 102.053L247.5 101.906V101.699H247ZM213.483 135.216L213.837 135.57L213.483 135.216ZM210.216 138.483L210.57 138.837L210.216 138.483ZM176.699 172V172.5H176.906L177.053 172.354L176.699 172ZM71.3008 172L70.9472 172.354L71.0937 172.5H71.3008V172ZM37.7841 138.483L38.1376 138.13V138.13L37.7841 138.483ZM34.5167 135.216L34.1632 135.57V135.57L34.5167 135.216ZM1 101.699H0.5V101.906L0.646447 102.053L1 101.699ZM1 -3.69922L0.646396 -4.05272L0.5 -3.90628V-3.69922H1ZM34.5071 -37.2159L34.1536 -37.5695L34.1535 -37.5694L34.5071 -37.2159ZM37.7745 -40.4833L38.128 -40.1297L37.7745 -40.4833ZM71.2912 -74V-74.5H71.0841L70.9376 -74.3536L71.2912 -74ZM176.69 -74L177.043 -74.3536L176.897 -74.5H176.69V-74ZM210.206 -40.4833L209.853 -40.1297L210.206 -40.4833ZM140.279 32.5184H140.779V32.0184H140.279V32.5184ZM140.279 65.4698V65.9698H140.779V65.4698H140.279ZM107.711 32.5184V32.0184H107.211V32.5184H107.711ZM107.711 65.4698H107.211V65.9698H107.711V65.4698ZM247.344 -4.05277L213.827 -37.5695L213.12 -36.8624L246.637 -3.34566L247.344 -4.05277ZM247 -4.19922H246.99V-3.19922H247V-4.19922ZM247.5 101.699V-3.69922H246.5V101.699H247.5ZM213.837 135.57L247.354 102.053L246.646 101.346L213.13 134.862L213.837 135.57ZM210.57 138.837L213.837 135.57L213.13 134.862L209.862 138.13L210.57 138.837ZM177.053 172.354L210.57 138.837L209.862 138.13L176.346 171.646L177.053 172.354ZM71.3008 172.5H176.699V171.5H71.3008V172.5ZM37.4305 138.837L70.9472 172.354L71.6543 171.646L38.1376 138.13L37.4305 138.837ZM34.1632 135.57L37.4305 138.837L38.1376 138.13L34.8703 134.862L34.1632 135.57ZM0.646447 102.053L34.1632 135.57L34.8703 134.862L1.35355 101.346L0.646447 102.053ZM0.5 -3.69922V101.699H1.5V-3.69922H0.5ZM34.1535 -37.5694L0.646396 -4.05272L1.3536 -3.34572L34.8607 -36.8624L34.1535 -37.5694ZM37.4209 -40.8368L34.1536 -37.5695L34.8607 -36.8624L38.128 -40.1297L37.4209 -40.8368ZM70.9376 -74.3536L37.4209 -40.8368L38.128 -40.1297L71.6447 -73.6464L70.9376 -74.3536ZM176.69 -74.5H71.2912V-73.5H176.69V-74.5ZM210.56 -40.8368L177.043 -74.3536L176.336 -73.6464L209.853 -40.1297L210.56 -40.8368ZM213.827 -37.5695L210.56 -40.8368L209.853 -40.1297L213.12 -36.8624L213.827 -37.5695ZM191.043 134.706H56.9474V135.706H191.043V134.706ZM209.706 116.043C209.706 126.355 201.355 134.706 191.043 134.706V135.706C201.907 135.706 210.706 126.907 210.706 116.043H209.706ZM209.706 -18.0526V116.043H210.706V-18.0526H209.706ZM191.043 -36.7159C201.355 -36.7159 209.706 -28.3642 209.706 -18.0526H210.706C210.706 -28.9165 201.907 -37.7159 191.043 -37.7159V-36.7159ZM56.9474 -36.7159H191.043V-37.7159H56.9474V-36.7159ZM38.2841 -18.0526C38.2841 -28.3642 46.6358 -36.7159 56.9474 -36.7159V-37.7159C46.0835 -37.7159 37.2841 -28.9165 37.2841 -18.0526H38.2841ZM38.2841 116.043V-18.0526H37.2841V116.043H38.2841ZM56.9474 134.706C46.6358 134.706 38.2841 126.355 38.2841 116.043H37.2841C37.2841 126.907 46.0835 135.706 56.9474 135.706V134.706ZM70.4266 14.8977V83.0905H71.4266V14.8977H70.4266ZM90.09 -4.76562C79.2261 -4.76562 70.4266 4.03383 70.4266 14.8977H71.4266C71.4266 4.58612 79.7784 -3.76562 90.09 -3.76562V-4.76562ZM157.9 -4.76562H90.09V-3.76562H157.9V-4.76562ZM177.563 14.8977C177.563 4.03383 168.763 -4.76562 157.9 -4.76562V-3.76562C168.211 -3.76562 176.563 4.58612 176.563 14.8977H177.563ZM177.563 83.0905V14.8977H176.563V83.0905H177.563ZM157.9 102.754C168.763 102.754 177.563 93.9544 177.563 83.0905H176.563C176.563 93.4021 168.211 101.754 157.9 101.754V102.754ZM90.09 102.754H157.9V101.754H90.09V102.754ZM70.4266 83.0905C70.4266 93.9544 79.2261 102.754 90.09 102.754V101.754C79.7784 101.754 71.4266 93.4021 71.4266 83.0905H70.4266ZM139.779 32.5184V65.4698H140.779V32.5184H139.779ZM107.711 33.0184H140.279V32.0184H107.711V33.0184ZM108.211 65.4698V32.5184H107.211V65.4698H108.211ZM140.279 64.9698H107.711V65.9698H140.279V64.9698Z"
+        fill={`url(#${gradientTwoId})`}
+        mask={`url(#${maskId})`}
+      />
+      <defs>
+        <linearGradient
+          id={gradientOneId}
+          x1="1"
+          y1="-1"
+          x2="143.007"
+          y2="171.994"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" stopOpacity="0.1" />
+          <stop offset="1" stopColor="white" stopOpacity="0.4" />
+        </linearGradient>
+        <linearGradient
+          id={gradientTwoId}
+          x1="0.999998"
+          y1="0.500001"
+          x2="140.501"
+          y2="171.999"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="white" stopOpacity="0.6" />
+          <stop offset="1" stopColor="white" stopOpacity="0.4" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+}