From d7a889e702dd0c0eae094c83159be569a6f58b50 Mon Sep 17 00:00:00 2001
From: devilkiller-ag <ashmitgupta.official@gmail.com>
Date: Wed, 27 Mar 2024 12:45:08 +0530
Subject: [PATCH] migrated Warning

---
 components/Remember.tsx | 25 +++++++++++++++++++------
 components/Warning.tsx  | 34 ++++++++++++++++++++++++++++++++++
 2 files changed, 53 insertions(+), 6 deletions(-)
 create mode 100644 components/Warning.tsx

diff --git a/components/Remember.tsx b/components/Remember.tsx
index e15472a37c2..ebb206b4365 100644
--- a/components/Remember.tsx
+++ b/components/Remember.tsx
@@ -2,7 +2,7 @@ import LightBulb from './icons/LightBulb';
 
 interface RememberProps {
   title?: string;
-  className: string;
+  className?: string;
   children: string;
 }
 
@@ -13,12 +13,25 @@ interface RememberProps {
  * @param {string} props.className - Additional classes for the figure
  * @param {string} props.children - The content of the remember component
  */
-export default function Remember({ title = 'Remember', className, children }: RememberProps) {
+export default function Remember({
+  title = 'Remember',
+  className = '',
+  children,
+}: RememberProps) {
   return (
-    <div className={`${className} mb-8 mt-4 rounded bg-secondary-100 p-4 text-gray-900`} data-testid='Remember-main'>
-      <h5 className='mb-4 border-b border-gray-900 pb-2 text-lg' data-testid='Remember-heading'>
-        <LightBulb className='-mt-0.5 mr-2 inline-block h-8' />
-        <span className='ml-2 inline-block font-sans font-medium antialiased' data-testid='Remember-title'>
+    <div
+      className={`${className} mb-8 mt-4 rounded bg-secondary-100 p-4 text-gray-900`}
+      data-testid="Remember-main"
+    >
+      <h5
+        className="mb-4 border-b border-gray-900 pb-2 text-lg"
+        data-testid="Remember-heading"
+      >
+        <LightBulb className="-mt-0.5 mr-2 inline-block h-8" />
+        <span
+          className="ml-2 inline-block font-sans font-medium antialiased"
+          data-testid="Remember-title"
+        >
           {title}
         </span>
       </h5>
diff --git a/components/Warning.tsx b/components/Warning.tsx
new file mode 100644
index 00000000000..dceff8014d5
--- /dev/null
+++ b/components/Warning.tsx
@@ -0,0 +1,34 @@
+import IconExclamation from './icons/Exclamation';
+
+interface WarningProps {
+  title: string;
+  className?: string;
+  description: string;
+}
+
+/**
+ * This component displays a warning component.
+ * @param {WarningProps} props - The props for the warning component
+ * @param {string} props.title - The title of the warning component
+ * @param {string} props.className - Additional classes for the figure
+ * @param {string} props.description - The content of the warning component
+ */
+export default function Warning({ className = '', title, description }: WarningProps) {
+  return (
+    <div className={`${className} rounded-md bg-yellow-50 p-4`} data-testid='Warning-main'>
+      <div className='flex'>
+        <div className='shrink-0'>
+          <IconExclamation className='size-5' />
+        </div>
+        <div className='ml-3'>
+          <h3 className='text-sm font-medium uppercase leading-5 text-yellow-800' data-testid='Warning-title'>
+            {title}
+          </h3>
+          <div className='mt-2 text-sm leading-5 text-yellow-700' data-testid='Warning-description'>
+            <p>{description}</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}