feat: add version badge (#14)

Author: aimensahnoun

src/app/layout.tsx

@@ -12,6 +12,7 @@ import {
 } from "@/components/ui/tooltip";
 import Link from "next/link";
 import { GoogleTagManager } from "@next/third-parties/google";
+import VersionDisplay from "@/components/VersionBadge";
 
 const montserrat = Montserrat({ subsets: ["latin"] });
 
@@ -73,6 +74,7 @@ export default function RootLayout({
             </Dock>
           </div>
         </TooltipProvider>
+        <VersionDisplay githubRelease="https://github.com/RequestNetwork/rn-checkout/releases" />
       </body>
       <GoogleTagManager gtmId={process.env.NEXT_PUBLIC_GTM_ID as string} />
     </html>

src/components/VersionBadge.tsx

@@ -0,0 +1,19 @@
+import { Badge } from "@/components/ui/badge";
+import packageInfo from "../../package.json";
+import Link from "next/link";
+
+interface VersionDisplayProps {
+  githubRelease: string;
+}
+
+export default function VersionDisplay({ githubRelease }: VersionDisplayProps) {
+  return (
+    <div className="flex m-4 md:m-0 md:fixed md:bottom-4 md:left-4 md:z-10">
+      <Link target="_blank" href={githubRelease}>
+        <Badge variant="outline" className="text-xs font-mono">
+          {packageInfo.version}
+        </Badge>
+      </Link>
+    </div>
+  );
+}

src/components/ui/badge.tsx

@@ -0,0 +1,36 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/80",
+        secondary:
+          "border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80",
+        destructive:
+          "border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/80",
+        outline: "text-slate-950 dark:text-slate-50",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+export interface BadgeProps
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return (
+    <div className={cn(badgeVariants({ variant }), className)} {...props} />
+  )
+}
+
+export { Badge, badgeVariants }