chore: petals > prem network

src/modules/service/components/PeerToPeer.tsx

@@ -0,0 +1,9 @@
+import clsx from "clsx";
+
+const PeerToPeer = ({ className }: React.ButtonHTMLAttributes<HTMLButtonElement>) => {
+  return (
+    <sup className={clsx("text-[12px] text-justify text-white", className)}>📡 PREM NETWORK</sup>
+  );
+};
+
+export default PeerToPeer;

src/modules/service/components/ServiceCard.tsx

@@ -11,7 +11,7 @@ import useWarningModal from "../hooks/useWarningModal";
 import type { ServiceCardProps } from "../types";
 
 import Beta from "./Beta";
-import Petals from "./Petals";
+import PeerToPeer from "./PeerToPeer";
 import ServiceActions from "./ServiceActions";
 
 const ServiceCard = ({ className, service }: ServiceCardProps) => {
@@ -56,11 +56,13 @@ const ServiceCard = ({ className, service }: ServiceCardProps) => {
           isWarningModalOpen={isWarningModalOpen}
         />
       </div>
-      <h3>
-        {title}
-        {service.beta && <Beta className="md:-top-2 top-[-5px]" />}
-        {service.petals && <Petals className="md:-top-2 top-[-5px]" />}
-      </h3>
+      <div className="flex items-start flex-wrap w-full relative justify-between">
+        <h3>
+          {title}
+          {service.beta && <Beta className="md:-top-2 top-[-5px]" />}
+        </h3>
+        <h1>{service.petals && <PeerToPeer className="md:top-1" />}</h1>
+      </div>
     </Link>
   );
 };