From a863e5b94d991850c7bcf0ecb919ca00fc3acdd8 Mon Sep 17 00:00:00 2001
From: Artyom Sovetnikov <2056864+Elringus@users.noreply.github.com>
Date: Tue, 21 Mar 2023 02:40:47 +0300
Subject: [PATCH] add multiple backs sample

---
 examples/vite-app/src/examples/Backgrounds/index.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/vite-app/src/examples/Backgrounds/index.tsx b/examples/vite-app/src/examples/Backgrounds/index.tsx
index c7783b00..8d6b7280 100644
--- a/examples/vite-app/src/examples/Backgrounds/index.tsx
+++ b/examples/vite-app/src/examples/Backgrounds/index.tsx
@@ -19,13 +19,13 @@ const initialNodes: Node[] = [
   },
 ];
 
-const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) => {
+const Flow: FC<{ id: string; bgProps: BackgroundProps[] }> = ({ id, bgProps }) => {
   const [nodes, , onNodesChange] = useNodesState(initialNodes);
 
   return (
     <ReactFlowProvider>
       <ReactFlow nodes={nodes} onNodesChange={onNodesChange} id={id}>
-        <Background {...bgProps} />
+        {bgProps.map((props, idx) => <Background key={idx} id={idx.toString()} {...props} />)}
       </ReactFlow>
     </ReactFlowProvider>
   );
@@ -33,9 +33,11 @@ const Flow: FC<{ id: string; bgProps: BackgroundProps }> = ({ id, bgProps }) =>
 
 const Backgrounds: FC = () => (
   <div className={styles.wrapper}>
-    <Flow id="flow-a" bgProps={{ variant: BackgroundVariant.Dots }} />
-    <Flow id="flow-b" bgProps={{ variant: BackgroundVariant.Lines, gap: [50, 50] }} />
-    <Flow id="flow-c" bgProps={{ variant: BackgroundVariant.Cross, gap: [100, 50] }} />
+    <Flow id="flow-a" bgProps={[{ variant: BackgroundVariant.Dots }]} />
+    <Flow id="flow-b" bgProps={[{ variant: BackgroundVariant.Lines, gap: [50, 50] }]} />
+    <Flow id="flow-c" bgProps={[{ variant: BackgroundVariant.Cross, gap: [100, 50] }]} />
+    <Flow id="flow-d" bgProps={[{ variant: BackgroundVariant.Lines, gap: 10 },
+                                { variant: BackgroundVariant.Lines, gap: 100, offset: 1, color: "#ccc" }]} />
   </div>
 );