From 69a5ddb03bee9603f2c7f27744c202c94a0d2144 Mon Sep 17 00:00:00 2001 From: Piotr Monwid-Olechnowicz Date: Mon, 6 Jan 2025 17:18:07 +0100 Subject: [PATCH] Move MeshDecoration to a .tsx file --- .../src/components/product-card/index.tsx | 2 +- .../product-card/mesh-decoration.svg | 53 -------------- .../product-card/mesh-decoration.tsx | 69 +++++++++++++++++++ 3 files changed, 70 insertions(+), 54 deletions(-) delete mode 100644 packages/components/src/components/product-card/mesh-decoration.svg create mode 100644 packages/components/src/components/product-card/mesh-decoration.tsx diff --git a/packages/components/src/components/product-card/index.tsx b/packages/components/src/components/product-card/index.tsx index 1dbea2b68..ad425f012 100644 --- a/packages/components/src/components/product-card/index.tsx +++ b/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 = { diff --git a/packages/components/src/components/product-card/mesh-decoration.svg b/packages/components/src/components/product-card/mesh-decoration.svg deleted file mode 100644 index 00f29425c..000000000 --- a/packages/components/src/components/product-card/mesh-decoration.svg +++ /dev/null @@ -1,53 +0,0 @@ - - - - - - - - - - - - - - - - - - diff --git a/packages/components/src/components/product-card/mesh-decoration.tsx b/packages/components/src/components/product-card/mesh-decoration.tsx new file mode 100644 index 000000000..f58f4cdd0 --- /dev/null +++ b/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) { + const maskId = useId(); + const gradientOneId = useId(); + const gradientTwoId = useId(); + return ( + + + + + + + + + + + + + + + + + + + ); +}