doc: added some comments

Author: Yugveer06

src/components/SnippetList.tsx

@@ -40,7 +40,7 @@ const SnippetList = () => {
             return (
               <motion.li
                 key={currentSnippet.title + idx}
-                layoutId={currentSnippet.title + (idx + 1).toString()}
+                layoutId={currentSnippet.title + (idx + 1).toString()} // unique id for layout animation
                 initial={{ opacity: 0, y: 20 }}
                 animate={{
                   opacity: 1,
@@ -69,6 +69,7 @@ const SnippetList = () => {
                   onClick={() =>
                     handleOpenModal({
                       ...currentSnippet,
+                      // added idx for the layout animation to work correctly
                       idx: idx + 1,
                     })
                   }

src/components/SnippetModal.tsx

@@ -49,7 +49,7 @@ const SnippetModal: React.FC<Props> = ({
         key="modal-content"
         className="modal | flow"
         data-flow-space="lg"
-        layoutId={snippet.title + snippet.idx?.toString()}
+        layoutId={snippet.title + snippet.idx?.toString()} // unique id for layout animation
         transition={{ type: "spring", duration: shouldReduceMotion ? 0 : 0.5 }}
       >
         <div className="modal__header">

src/types/index.ts

@@ -14,7 +14,7 @@ export type SnippetType = {
   code: string;
   tags: string[];
   author: string;
-  idx?: number; // Add optional idx property
+  idx?: number;
 };
 
 export type AppState = {