feat: add coreboxx as a minecraft account verifier

src/components/misc/InfoClaim.tsx

@@ -29,44 +29,107 @@
  */
 
 "use client";
-
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "../ui/tabs";
-import { useState } from "react";
+import { Badge } from "../ui/badge";
-import { TextCopyComp } from "./TextCopyComp";
+import Link from "next/link";
-import { ChevronDown, ChevronUp } from "lucide-react";
+import { Alert, AlertDescription, AlertTitle } from "../ui/alert";
+import { ServerOff } from "lucide-react";
 
 export function ShowInfo() {
-  const [open, setOpen] = useState(false);
   return (
     <div>
-      {open == false && (
+      <br />
-        <div
+      Choose a method:
-          className="text-blue-500 flex items-center cursor-pointer"
+      <Tabs defaultValue="preview" className="relative mr-auto w-full">
-          onClick={() => setOpen(true)}
+        <div className="flex items-center justify-between pb-3">
-        >
+          <TabsList className="w-full justify-start rounded-none border-b bg-transparent p-0">
-          More info <ChevronDown size={16} className="ml-2" />
+            <TabsTrigger
+              value="coreboxx"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              CoreBoxx <Badge className="ml-3">Recommended</Badge>
+            </TabsTrigger>
+            <TabsTrigger
+              value="mhsfpv"
+              className="relative h-9 rounded-none border-b-2 border-b-transparent bg-transparent px-4 pb-3 pt-2 font-semibold text-muted-foreground shadow-none transition-none data-[state=active]:border-b-primary data-[state=active]:text-foreground data-[state=active]:shadow-none"
+            >
+              MHSFPV
+            </TabsTrigger>
+          </TabsList>
         </div>
-      )}
+        <TabsContent value="coreboxx">
-      {open == true && (
-        <>
           <p>
-            By claiming your account, you can add Markdown descriptions and{" "}
+            <Link href="/server/CoreBoxx" className="underline">
-            custom color schemes to your server (and more), making it stand out.
+              CoreBoxx
-            To get started, join the server below on your Minecraft account.
+            </Link>{" "}
-            Enter the code in chat in the website, and you will link your
+            has partnered with us to have an integrated account linking feature,
-            account. You may need to go into the lobby and start the server.
+            which is also open all day.
           </p>
           <br />
-          <TextCopyComp />
+          <p className="py-1">
+            <code className="border rounded-full bg-muted h-[1.75rem] w-[1.75rem] absolute inline-flex items-center justify-center">
+              1
+            </code>
+            <span className="ml-[2.25rem] pt-0.5 grid grid-rows-2">
+              <span>Join CoreBoxx</span>
+
+              <code className="border rounded p-2">CoreBoxx.minehut.gg</code>
+            </span>
+          </p>
+          <p className="py-1">
+            <code className="border rounded-full bg-muted h-[1.75rem] w-[1.75rem] absolute inline-flex items-center justify-center">
+              2
+            </code>
+            <span className="ml-[2.25rem] pt-0.5 grid">
+              <span>
+                Link your account using <code>/mhsf</code>
+              </span>
+            </span>
+          </p>
+          <p className="py-1">
+            <code className="border rounded-full bg-muted h-[1.75rem] w-[1.75rem] absolute inline-flex items-center justify-center">
+              3
+            </code>
+            <span className="ml-[2.25rem] pt-0.5 grid">
+              <span>Input the code returned below</span>
+            </span>
+          </p>
+        </TabsContent>
+        <TabsContent value="mhsfpv">
+          <Alert>
+            <ServerOff className="h-4 w-4" />
+            <AlertTitle>Server isn't online all day</AlertTitle>
+            <AlertDescription>
+              While joining MHSFPV, you may need to go into the lobby to start
+              the server to then join.
+            </AlertDescription>
+          </Alert>
           <br />
+          <p>
+            MHSFPV is a Minehut server dedicated to linking your account on
+            MHSF.
+          </p>
           <br />
-          <div
+          <p className="py-1">
-            className="text-blue-500 flex items-center cursor-pointer"
+            <code className="border rounded-full bg-muted h-[1.75rem] w-[1.75rem] absolute inline-flex items-center justify-center">
-            onClick={() => setOpen(false)}
+              1
-          >
+            </code>
-            Less info <ChevronUp size={16} className="ml-2" />
+            <span className="ml-[2.25rem] pt-0.5 grid grid-rows-2">
-          </div>
+              <span>Join MHSFPV</span>
-        </>
+
-      )}
+              <code className="border rounded p-2">MHSFPV.minehut.gg</code>
+            </span>
+          </p>
+          <p className="py-1">
+            <code className="border rounded-full bg-muted h-[1.75rem] w-[1.75rem] absolute inline-flex items-center justify-center">
+              2
+            </code>
+            <span className="ml-[2.25rem] pt-0.5 grid">
+              <span>Input the code in chat below</span>
+            </span>
+          </p>
+        </TabsContent>
+      </Tabs>
     </div>
   );
 }

src/components/ui/alert.tsx

@@ -0,0 +1,59 @@
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }