Added Media Object to bootstrap-5 and Fixed filename

data/boostrap-5.json → data/bootstrap-5.json

@@ -320,6 +320,18 @@
                 }
             ]
         },
+        {
+            "title": "মিডিয়া অবজেক্ট",
+            "items": [{
+                    "definition": "লেফট অ্যালাইন মিডিয়া",
+                    "code": "<div class='d-flex'> <div class='flex-shrink-0'><img src='...' alt='...'></div> <div class='flex-grow-1 ms-3'>This is some content from a media component.</div> </div>"
+                },
+                {
+                    "definition": "রাইট অ্যালাইন মিডিয়া",
+                    "code": "<div class='d-flex'> <div class='flex-grow-1 me-3'>This is some content from a media component.</div> <div class='flex-shrink-0'><img src='...' alt='...'></div> </div>"
+                }
+            ]
+        },
         {
             "title": "ক্যারোসেল",
             "items": [{
@@ -521,4 +533,4 @@
             ]
         }
     ]
-}
+}

data/react-cheat-sheet.json

@@ -94,24 +94,24 @@
       ]
     },
     {
-        "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)",
-        "items": [
-          {
-            "definition": "একটি কন্ডিশন তৈরী করা যাতে রেন্ডারিং নির্ভর করবে",
-            "code": "const isLoggedIn = true;"
-          },
-          {
-            "definition": "একটি কন্ডিশনাল এক্সপ্রেশন ব্যবহার করে ভিন্ন JSX রেন্ডার করা",
-            "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;"
-          },
-          {
-            "definition": "logical && অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি true হবে তখনই JSX রেন্ডার হবে",
-            "code": "isLoggedIn && <h1>Welcome Back!</h1>"
-          },
-          {
-            "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই JSX রেন্ডার হবে",
-            "code": "isLoggedIn || <h1>Welcome Back!</h1>"
-          }
+      "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)",
+      "items": [
+        {
+          "definition": "একটি কন্ডিশন তৈরী করা যাতে রেন্ডারিং নির্ভর করবে",
+          "code": "const isLoggedIn = true;"
+        },
+        {
+          "definition": "একটি কন্ডিশনাল এক্সপ্রেশন ব্যবহার করে ভিন্ন JSX রেন্ডার করা",
+          "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;"
+        },
+        {
+          "definition": "logical && অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি true হবে তখনই JSX রেন্ডার হবে",
+          "code": "isLoggedIn && <h1>Welcome Back!</h1>"
+        },
+        {
+          "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই JSX রেন্ডার হবে",
+          "code": "isLoggedIn || <h1>Welcome Back!</h1>"
+        }
       ]
     },
     {
@@ -169,11 +169,11 @@
       "items": [
         {
           "definition": "কন্ডিশনাল রেন্ডারিং - রিঅ্যাক্ট এ একটি কন্ডিশনের উপর নির্ভর করে ভিন্ন ভিন্ন JSX রেন্ডার করতে ব্যবহৃত হয়। এটি বিভিন্ন ধরণের সিনট্যাক্সের সাহায্যে করা যায়, যেমন টার্নারি অপারেটর, logical && এবং || অপারেটর ব্যবহার করে।",
-          "code": "isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;",
+          "code": "isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;"
         },
         {
           "definition": "টার্নারি অপারেটর - কন্ডিশনের উপর ভিত্তি করে দুটি মানের মধ্যে একটি রিটার্ন করে। এটি শুধুমাত্র একটি এক্সপ্রেশন হিসাবে ব্যবহৃত হয় এবং 'if-else' এর সংক্ষিপ্ত রূপ হিসেবে কাজ করে।",
-          "example": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;",
+          "code": "const greeting = isLoggedIn ? <h1>Welcome Back!</h1> : <h1>Please Sign In</h1>;"
         }
       ]
     },
@@ -293,36 +293,34 @@
       ]
     },
     {
-          "title": "রিঅ্যাক্ট রাউটার v6",
-          "items": [
-            {
-              "definition": "npm এর সাহায্যে রাউটার ইন্সটল",
-              "code": "npm install react-router-dom@6"
-            },
-            {
-              "definition": "yarn এর সাহায্যে রাউটার ইন্সটল",
-              "code": "yarn add react-router-dom@6"
-            },
-            {
-              "definition": "Router সেট করতে App.js এ যুক্ত করুন",
-              "code": "import { BrowserRouter } from 'react-router-dom'"
-            },
-            {
-              "definition": "Router Render করতে App.js এ যুক্ত করুন",
-              "code": "import { Routes, Route } from 'react-router-dom'"
-            },
-            {
-              "definition": "লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন",
-              "code": "import { Routes, Route, Link } from 'react-router-dom'"
-            },
-            {
-              "definition": "যেভাবে রাউটার অবজেক্ট বানিয়ে রাউটার কম্পোনেন্ট সেটআপ করবেন"
-            },
-            {
-              "code": "import { useRoutes } from 'react-router-dom'\n//inside the component\nconst routes = [\n  children: [\n   {\n    element: <PageComponent />,\n    path: '/path',\n   }\n  ]\n]\nconst routerRegister = useRoutes(routes)\nreturn routerRegister"
-            }
-          ]
+      "title": "রিঅ্যাক্ট রাউটার v6",
+      "items": [
+        {
+          "definition": "npm এর সাহায্যে রাউটার ইন্সটল",
+          "code": "npm install react-router-dom@6"
+        },
+        {
+          "definition": "yarn এর সাহায্যে রাউটার ইন্সটল",
+          "code": "yarn add react-router-dom@6"
+        },
+        {
+          "definition": "Router সেট করতে App.js এ যুক্ত করুন",
+          "code": "import { BrowserRouter } from 'react-router-dom'"
+        },
+        {
+          "definition": "Router Render করতে App.js এ যুক্ত করুন",
+          "code": "import { Routes, Route } from 'react-router-dom'"
+        },
+        {
+          "definition": "লিংক বা সুইচ এর মাধ্যমে পেইজ পরিবর্তন করতে App.js এ যুক্ত করুন",
+          "code": "import { Routes, Route, Link } from 'react-router-dom'"
         },
+        {
+          "definition": "যেভাবে রাউটার অবজেক্ট বানিয়ে রাউটার কম্পোনেন্ট সেটআপ করবেন",
+          "code": "import { useRoutes } from 'react-router-dom'\n//inside the component\nconst routes = [\n  children: [\n   {\n    element: <PageComponent />,\n    path: '/path',\n   }\n  ]\n]\nconst routerRegister = useRoutes(routes)\nreturn routerRegister"
+        }
+      ]
+    },
     {
       "title": "রিঅ্যাক্ট হুকস",
       "items": [
@@ -338,7 +336,7 @@
     },
     {
       "title": "রিঅ্যাক্ট JS এ কন্ডিশনাল রেন্ডারিং (Conditional Rendering)",
-      "iitems": [
+      "items": [
         {
           "definition": "একটি কন্ডিশন তৈরী করা যেই কন্ডিসনে রেন্ডারিং নির্ভর করবে",
           "code": "const isLoggedIn = true;"
@@ -354,26 +352,25 @@
         {
           "definition": "logical || অপারেটর ব্যবহার করে কন্ডিশনাল রেন্ডারিং করা - যখন কন্ডিশনটি false হবে তখনই অন্যটি রেন্ডার হবে",
           "code": "const greeting = isLoggedIn || <h1>Please Sign In</h1>;"
-        },
-      ],
-    },
-    {
-  "title": "রিঅ্যাক্ট JS এ কন্ট্রোলড এবং আনকন্ট্রোলড কম্পোনেন্টের পার্থক্য",
-  "items": [
-    {
-      "definition": "কন্ট্রোলড কম্পোনেন্ট: কন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু React এর স্টেট দ্বারা নিয়ন্ত্রিত হয়। ইউজারের ইনপুট পরিবর্তনের সময় স্টেট আপডেট হয়।",
-      "code": "const [value, setValue] = useState('');\n\n<input type=\"text\" value={value} onChange={(e) => setValue(e.target.value)} />"
-    },
-    {
-      "definition": "আনকন্ট্রোলড কম্পোনেন্ট: আনকন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু সরাসরি DOM দ্বারা পরিচালিত হয়। React এর স্টেট ব্যবহারের প্রয়োজন নেই।",
-      "code": "const inputRef = useRef(null);\n\n<input type=\"text\" ref={inputRef} />"
+        }
+      ]
     },
     {
-      "definition": "কন্ট্রোলড কম্পোনেন্টে ফর্ম ভ্যালিডেশন এবং ইনপুট ভ্যালুতে নির্দিষ্ট নিয়ন্ত্রণ রাখা সহজ। আনকন্ট্রোলড কম্পোনেন্টে নিয়ন্ত্রণ সীমিত থাকে এবং DOM থেকে সরাসরি ভ্যালু পেতে হয়।",
-      "code": "// কন্ট্রোলড কম্পোনেন্টে ভ্যালিডেশন উদাহরণ\nconst handleSubmit = (e) => {\n  e.preventDefault();\n  if (value.length > 5) {\n    // ভ্যালিডেশন সফল\n  }\n};"
+      "title": "রিঅ্যাক্ট JS এ কন্ট্রোলড এবং আনকন্ট্রোলড কম্পোনেন্টের পার্থক্য",
+      "items": [
+        {
+          "definition": "কন্ট্রোলড কম্পোনেন্ট: কন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু React এর স্টেট দ্বারা নিয়ন্ত্রিত হয়। ইউজারের ইনপুট পরিবর্তনের সময় স্টেট আপডেট হয়।",
+          "code": "const [value, setValue] = useState('');\n\n<input type=\"text\" value={value} onChange={(e) => setValue(e.target.value)} />"
+        },
+        {
+          "definition": "আনকন্ট্রোলড কম্পোনেন্ট: আনকন্ট্রোলড কম্পোনেন্টে ইনপুট ভ্যালু সরাসরি DOM দ্বারা পরিচালিত হয়। React এর স্টেট ব্যবহারের প্রয়োজন নেই।",
+          "code": "const inputRef = useRef(null);\n\n<input type=\"text\" ref={inputRef} />"
+        },
+        {
+          "definition": "কন্ট্রোলড কম্পোনেন্টে ফর্ম ভ্যালিডেশন এবং ইনপুট ভ্যালুতে নির্দিষ্ট নিয়ন্ত্রণ রাখা সহজ। আনকন্ট্রোলড কম্পোনেন্টে নিয়ন্ত্রণ সীমিত থাকে এবং DOM থেকে সরাসরি ভ্যালু পেতে হয়।",
+          "code": "// কন্ট্রোলড কম্পোনেন্টে ভ্যালিডেশন উদাহরণ\nconst handleSubmit = (e) => {\n  e.preventDefault();\n  if (value.length > 5) {\n    // ভ্যালিডেশন সফল\n  }\n};"
+        }
+      ]
     }
   ]
 }
-
-  ]
-}