Fix ids being randomized on each client

ably · Jul 31, 2023 · 67dbf9b · 67dbf9b
1 parent 509c44a
commit 67dbf9b
Showing 1 changed file with 22 additions and 23 deletions.
diff --git a/demo-react/src/App.tsx b/demo-react/src/App.tsx
@@ -1,5 +1,4 @@
 import { useContext, useEffect } from 'react';
-import { nanoid } from 'nanoid';
 
 import {
   ComingSoon,
@@ -78,94 +77,94 @@ const slides = [
       <div className="grid grid-cols-1 md:grid-cols-2 gap-8 md:gap-28 h-full items-center p-8 md:p-20">
         <div>
           <Title
-            id={nanoid()}
+            id="1"
             className="w-48"
           >
             Key Design Principles
           </Title>
-          <Paragraph id={nanoid()}>
+          <Paragraph id="2">
             Effective design centres on four basic principles: contrast, repetition, alignment and proximity. These
             appear in every design.
           </Paragraph>
         </div>
         <div className="grid grid-cols-2 gap-8">
           <Image
             src="/contrast.svg"
-            id={nanoid()}
+            id="3"
           >
             <div className="absolute top-4 md:top-8 left-0 scale-[70%]">
               <Title
                 variant="h2"
-                id={nanoid()}
+                id="4"
               >
                 Contrast
               </Title>
               <Paragraph
                 variant="aside"
-                id={nanoid()}
+                id="5"
               >
                 When a design uses several elements, the goal is to make each one distinct.
               </Paragraph>
             </div>
           </Image>
           <Image
             src="/repetition.svg"
-            id={nanoid()}
+            id="6"
           >
             <div className="absolute top-4 md:top-8 left-0 scale-[70%]">
               <Title
                 variant="h2"
-                id={nanoid()}
+                id="7"
               >
                 Repetition
               </Title>
               <Paragraph
                 variant="aside"
-                id={nanoid()}
+                id="8"
               >
                 Repetition helps designers establish relationships, develop organization and strengthen unity.
               </Paragraph>
             </div>
           </Image>
           <Image
             src="/alignment.svg"
-            id={nanoid()}
+            id="9"
           >
             <div
               data-id="slide-figcaption-placeholder"
               className="absolute top-4 md:top-8 left-0 scale-[70%]"
             >
               <Title
                 variant="h2"
-                id={nanoid()}
+                id="10"
               >
                 Alignment
               </Title>
               <Paragraph
                 variant="aside"
-                id={nanoid()}
+                id="11"
               >
                 Alignment creates a clean, sophisticated look. All elements should relate to all others in some way.
               </Paragraph>
             </div>
           </Image>
           <Image
             src="/proximity.svg"
-            id={nanoid()}
+            id="12"
           >
             <div
               data-id="slide-figcaption-placeholder"
               className="absolute top-4 md:top-8 left-0 scale-[70%]"
             >
               <Title
                 variant="h2"
-                id={nanoid()}
+                id="13"
               >
                 Proximity
               </Title>
               <Paragraph
                 variant="aside"
-                id={nanoid()}
+                id="14"
               >
                 When items are grouped, they become a single visual unit, rather than several separate entities.
               </Paragraph>
@@ -181,34 +180,34 @@ const slides = [
         <div>
           <Title
             variant="h3"
-            id={nanoid()}
+            id="1"
           >
             How users read
           </Title>
           <Title
             variant="h2"
             className="mb-4"
-            id={nanoid()}
+            id="2"
           >
             Add graphics
           </Title>
           <Paragraph
             className="!mb-8"
-            id={nanoid()}
+            id="3"
           >
             No one likes boring text blocks on a website. And{' '}
             <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">images and icons</span>{' '}
             are the fastest way to get information.
           </Paragraph>
-          <Paragraph id={nanoid()}>
+          <Paragraph id="4">
             But <span className="text-ably-avatar-stack-demo-slide-title-highlight font-semibold">don't overdo it</span>
             . If you can't explain for what purpose you put this line or icon, it's better to abandon it.
           </Paragraph>
         </div>
         <Image
           src="/collaborative-document.svg"
           className="absolute right-[26px] w-[477px]"
-          id={nanoid()}
+          id="5"
         />
       </div>
     ),
@@ -220,21 +219,21 @@ const slides = [
           <Title
             variant="h2"
             className="mb-4"
-            id={nanoid()}
+            id="1"
           >
             Design Statistics
           </Title>
           <Paragraph
             className="!mb-[250px]"
-            id={nanoid()}
+            id="2"
           >
             How do SMBs rate the importance of graphic design to their success?
           </Paragraph>
         </div>
         <Image
           src="/bubble-diagram.svg"
           className="absolute md:w-[688px] right-72 top-20"
-          id={nanoid()}
+          id="3"
         />
       </div>
     ),