src/components/misc/InfoClaim.tsx

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

@@ -1,59 +0,0 @@
-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 }