task: Update website to use <AMABadge /> component

website/package.json

@@ -22,7 +22,7 @@
     "@iconify/react": "^4.1.1",
     "@mdx-js/react": "^3.0.1",
     "clsx": "^2.1.1",
-    "formidable-oss-badges": "^1.4.1",
+    "formidable-oss-badges": "^1.7.0",
     "prism-react-renderer": "^2.3.1",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",

website/src/components/landing/landing-featured-projects.tsx

@@ -1,7 +1,7 @@
 import {
   FeaturedBadge,
   ProjectBadge,
-  featuredBadgeNames,
+  FeaturedBadgeNames,
 } from 'formidable-oss-badges';
 import React from 'react';
 
@@ -19,7 +19,21 @@ export const DEFAULT_BADGE_COLOR_OPTIONS = [
   '#166BFF',
 ];
 
-type featuredProject = Parameters<typeof FeaturedBadge>[0]['name'];
+function isFeaturedBadgeName(value: string): value is FeaturedBadgeNames {
+  return [
+    'envy',
+    'figlog',
+    'cloudsplice',
+    'ama',
+    'renature',
+    'victory',
+    'spectacle',
+    'urql',
+    'nuka',
+    'owl',
+    'groqd',
+  ].includes(value);
+}
 
 export const LandingFeaturedProjects = <Name extends string>({
   heading,
@@ -28,7 +42,7 @@ export const LandingFeaturedProjects = <Name extends string>({
 }: {
   heading: string;
   projects: {
-    name: featuredProject | Name;
+    name: FeaturedBadgeNames | Name;
     link: string;
     description: string;
     title?: string;
@@ -44,10 +58,9 @@ export const LandingFeaturedProjects = <Name extends string>({
           href={link}
           key={link}
           className="col-span-2 sm:col-span-1 block grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 align-center items-center text-theme-2 hover:text-theme-2 dark:text-white dark:hover:text-white">
-          {featuredBadgeNames.includes(name.toLocaleLowerCase()) ||
-          name === 'Victory Native' ? (
+          {isFeaturedBadgeName(name.toLocaleLowerCase()) ? (
             <FeaturedBadge
-              name={name as featuredProject}
+              name={name as FeaturedBadgeNames}
               isHoverable
               className="col-span-1"
             />

website/src/components/landing/landing-hero.tsx

@@ -1,4 +1,4 @@
-import { ProjectBadge } from 'formidable-oss-badges';
+import { AMABadge } from 'formidable-oss-badges';
 import React, { useState } from 'react';
 
 export const LandingHero = ({
@@ -23,12 +23,7 @@ export const LandingHero = ({
       <div className="py-12 lg:py-24 mx-16 lg:mx-32 xl:mx-64 relative">
         <div className="flex-col md:flex-row flex justify-between gap-16 lg:gap-24 mx-auto">
           <div className="self-center md:self-left">
-            <ProjectBadge
-              color="#CD9AF5"
-              description={'react native ama'}
-              abbreviation={'Ra'}
-              className="h-[320px] w-[320px]"
-            />
+            <AMABadge name={'ama'} className="h-[320px] w-[320px]" />
           </div>
           <div className="text-left lg:w-6/12 text-black">
             <h1 className="text-4xl font-bold tracking-tight sm:text-6xl">

website/yarn.lock

@@ -6753,13 +6753,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"formidable-oss-badges@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "formidable-oss-badges@npm:1.4.1"
+"formidable-oss-badges@npm:^1.7.0":
+  version: 1.7.0
+  resolution: "formidable-oss-badges@npm:1.7.0"
   peerDependencies:
     react: ">= 18.0.0"
     react-dom: ">= 18.0.0"
-  checksum: 7abf9556701f9a4ad679dfcccfeaeaa5c2f267928ce32eb7467dfb43305f875d7f59638b24a9cbbafc0ae49d792eb1a667ccd3a876e7182da806a34b2f3192ed
+  checksum: a4ff18f5bce95155ae62d3438411dad329395b022f6d5eaa1a869c9ee30101eb2138aad59a2813000561c98a6f5bf426cdb7afc5d781d0b6d4c0ff80ec48207a
   languageName: node
   linkType: hard
 
@@ -13144,7 +13144,7 @@ __metadata:
     autoprefixer: ^10.4.19
     clsx: ^2.1.1
     docusaurus-plugin-image-zoom: ^2.0.0
-    formidable-oss-badges: ^1.4.1
+    formidable-oss-badges: ^1.7.0
     postcss: ^8.4.39
     prism-react-renderer: ^2.3.1
     react: ^18.3.1