refactor: make compatibility note easier to maintain

qwikifiers · Oct 2, 2024 · 3ea0620 · 3ea0620
1 parent 91feea3
commit 3ea0620
Showing 1 changed file with 8 additions and 54 deletions.
diff --git a/apps/website/src/components/animations/compatability.tsx b/apps/website/src/components/animations/compatability.tsx
@@ -1,6 +1,5 @@
 import { component$ } from '@builder.io/qwik';
 import { Note, NoteStatus } from '../note/note'; // Adjust the import path based on your structure
-import { Badge } from '~/components/ui';
 
 export const BrowserAnimationsCompatability = component$(() => {
   return (
@@ -9,59 +8,14 @@ export const BrowserAnimationsCompatability = component$(() => {
         <h4>
           <strong>Browser Compatability</strong>
         </h4>
-        Browser versions that do not support the popover API natively have known issues
-        when trying to use animations or transitions. If you need to support legacy
-        versions of browsers, please be sure to test this functionality independently.
-        <table class="w-full min-w-[540px] text-left sm:min-w-full">
-          <thead>
-            <tr>
-              <th>Browser</th>
-              <th>Minimum Version</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td>Internet Explorer</td>
-              <td>
-                <Badge look="alert" class="w-12 justify-center">
-                  N/A
-                </Badge>
-              </td>
-            </tr>
-            <tr>
-              <td>Firefox</td>
-              <td>
-                <Badge look="primary" class="w-12 justify-center">
-                  125
-                </Badge>
-              </td>
-            </tr>
-            <tr>
-              <td>Chrome</td>
-              <td>
-                <Badge look="primary" class="w-12 justify-center">
-                  114
-                </Badge>
-              </td>
-            </tr>
-            <tr>
-              <td>Safari</td>
-              <td>
-                <Badge look="primary" class="w-12 justify-center">
-                  17
-                </Badge>
-              </td>
-            </tr>
-            <tr>
-              <td>Edge</td>
-              <td>
-                <Badge look="primary" class="w-12 justify-center">
-                  114
-                </Badge>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+        <p>
+          <a href="https://caniuse.com/?search=popover%20API">
+            Browser versions that do not support the popover API natively
+          </a>{' '}
+          have known issues when trying to use animations or transitions. If you need to
+          support legacy versions of browsers, please be sure to test this functionality
+          independently.
+        </p>
       </div>
     </Note>
   );