Trying a different approach

Trying a different approach

Author: benjagm

components/Information.tsx

@@ -316,48 +316,87 @@ const StyledMarkdownBlock = ({ markdown }: { markdown: string }) => {
                 )
               }
             },
-            Infobox: {
+            Warning: {
               component: ({ children, label }) => {
                 return (
-                 
-                  <Information label={label} iconSrc='/icons/info-blue.svg' bgColor='blue' textColor='black'>
-                  {children}
-                </Information>
-             
+                  <BlockContext.Provider value={BlockContextValue.Information}>
+                    <div className='my-2'>
+                      {label && (
+                        <div className='bg-orange-100 inline-block text-sm rounded-t-lg px-6 py-1 text-orange-600'>
+                          {label}
+                        </div>
+                      )}
+                      <div className='flex flex-row items-center mb-6 bg-orange-50 px-6 py-4 border border-orange-100 rounded text-slate-600 leading-7'>
+                        <img src='/icons/warning.svg' className='h-7 w-7 mr-3' alt="" />
+                        <div className='font'>
+                          {children}
+                        </div>
+                      </div>
+                    </div>
+                  </BlockContext.Provider>
                 )
               }
             },
-            
-            Tip: {
+            Infobox: {
               component: ({ children, label }) => {
                 return (
-       
-                  <Information label={label} iconSrc='/icons/bulb.svg' bgColor='green' textColor='black'>
-                  {children}
-                </Information>
-             
+                  <BlockContext.Provider value={BlockContextValue.Information}>
+                    <div className='my-2'>
+                      {label && (
+                        <div className='bg-blue-100 inline-block text-sm rounded-t-lg px-6 py-1 text-blue-600'>
+                          {label}
+                        </div>
+                      )}
+                      <div className='flex flex-row items-center mb-6 bg-blue-50 px-6 py-4 border border-blue-100 rounded text-slate-600 leading-7'>
+                        <img src='/icons/info-blue.svg' className='h-7 w-7 mr-3' alt="" />
+                        <div className='font'>
+                          {children}
+                        </div>
+                      </div>
+                    </div>
+                  </BlockContext.Provider>
                 )
               }
             },
-            Warning: {
+            Tip: {
               component: ({ children, label }) => {
                 return (
-                  
-                  <Information label={label} iconSrc='/icons/info-yellow.svg'  bgColor='amber' textColor='black'>
-                  {children}
-                </Information>
-              
+                  <BlockContext.Provider value={BlockContextValue.Information}>
+                    <div className='my-2'>
+                      {label && (
+                        <div className='bg-green-100 inline-block text-sm rounded-t-lg px-6 py-1 text-green-600'>
+                          {label}
+                        </div>
+                      )}
+                      <div className='flex flex-row items-center mb-6 bg-green-50 px-6 py-4 border border-green-100 rounded text-slate-600 leading-7'>
+                        <img src='/icons/bulb.svg' className='h-7 w-7 mr-3' alt="" />
+                        <div className='font'>
+                          {children}
+                        </div>
+                      </div>
+                    </div>
+                  </BlockContext.Provider>
                 )
               }
             },
             Danger: {
               component: ({ children, label }) => {
                 return (
-            
-                  <Information label={label} iconSrc='/icons/warning.svg' bgColor='red' textColor='black' >
-                  {children}
-                </Information>
-           
+                  <BlockContext.Provider value={BlockContextValue.Information}>
+                    <div className='my-2'>
+                      {label && (
+                        <div className='bg-red-100 inline-block text-sm rounded-t-lg px-6 py-1 text-red-600'>
+                          {label}
+                        </div>
+                      )}
+                      <div className='flex flex-row items-center mb-6 bg-red-50 px-6 py-4 border border-red-100 rounded text-slate-600 leading-7'>
+                        <img src='/icons/info-yellow.svg' className='h-7 w-7 mr-3' alt="" />
+                        <div className='font'>
+                          {children}
+                        </div>
+                      </div>
+                    </div>
+                  </BlockContext.Provider>
                 )
               }
             },