diff --git a/app/layout.tsx b/app/layout.tsx index e159121..0dbc22d 100644 --- a/app/layout.tsx +++ b/app/layout.tsx @@ -16,8 +16,8 @@ const geistMono = Geist_Mono({ }); export const metadata: Metadata = { - title: "Create Next App", - description: "Generated by create next app", + title: "Takasumi-Neodyマイクラサーバプロジェクト接続ガイド", + description: "Takasumi-Neodyマイクラサーバプロジェクト（サバイバル鯖・建築鯖）への接続方法とサーバアドレスを案内します。", }; export default function RootLayout({ @@ -27,7 +27,7 @@ export default function RootLayout({ }>) { return ( {children} diff --git a/app/page.tsx b/app/page.tsx index 3f36f7c..9e7f386 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -1,64 +1,104 @@ -import Image from "next/image"; +"use client"; + +import { ExternalLink, Pickaxe, Sprout, Wifi } from "lucide-react"; + +import { Badge } from "@/components/ui/badge"; +import { buttonVariants } from "@/components/ui/button"; +import { + Card, + CardContent, + CardDescription, + CardFooter, + CardHeader, + CardTitle, +} from "@/components/ui/card"; +import { Separator } from "@/components/ui/separator"; +import { cn } from "@/lib/utils"; + +const servers = [ + { + name: "サバイバル鯖", + description: "採掘・冒険・建築を楽しむ通常ワールドです。", + address: "survival.mc.neody.ad.jp", + icon: Sprout, + badgeVariant: "default" as const, + }, + { + name: "建築鯖", + description: "大型建築や街づくり向けのクリエイティブ環境です。", + address: "kenchiku.mc.neody.ad.jp", + icon: Pickaxe, + badgeVariant: "secondary" as const, + }, +]; export default function Home() { return ( -
-
- Next.js logo -
-

- To get started, edit the page.tsx file. +
+
+
+
+ + Takasumi-Neodyマイクラサーバプロジェクト接続ガイド + +

+ Minecraft サーバへ接続する

-

- Looking for a starting point or more instructions? Head over to{" "} - - Templates - {" "} - or the{" "} - - Learning - {" "} - center. +

+ サーバー追加画面で下記アドレスを入力してください。Java Edition と + 統合版のどちらにも対応しています。

-
- + + +
+ {servers.map((server) => { + const Icon = server.icon; + return ( + + +
+ {server.name} + + + Java / 統合版 対応 + +
+ + + {server.name} + + {server.description} + + +
+

サーバアドレス

+

{server.address}

+
+ + + + Minecraft で開く + + + + + ); + })} +
+ +
+

接続手順

+ +
    +
  1. 1. Minecraft（Java Edition または統合版）を起動する。
    2. +
  2. 2. サーバー追加画面を開く（Java: マルチプレイ / 統合版: サーバー）。
    3. +
  3. 3. 接続したい鯖のサーバアドレスを入力して保存する。
    4. +
  4. 4. 一覧からサーバを選んで接続する。
    5. +
+

); diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx new file mode 100644 index 0000000..b20959d --- /dev/null +++ b/components/ui/badge.tsx @@ -0,0 +1,52 @@ +import { mergeProps } from "@base-ui/react/merge-props" +import { useRender } from "@base-ui/react/use-render" +import { cva, type VariantProps } from "class-variance-authority" + +import { cn } from "@/lib/utils" + +const badgeVariants = cva( + "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", + { + variants: { + variant: { + default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80", + secondary: + "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80", + destructive: + "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20", + outline: + "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground", + ghost: + "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50", + link: "text-primary underline-offset-4 hover:underline", + }, + }, + defaultVariants: { + variant: "default", + }, + } +) + +function Badge({ + className, + variant = "default", + render, + ...props +}: useRender.ComponentProps<"span"> & VariantProps) { + return useRender({ + defaultTagName: "span", + props: mergeProps<"span">( + { + className: cn(badgeVariants({ variant }), className), + }, + props + ), + render, + state: { + slot: "badge", + variant, + }, + }) +} + +export { Badge, badgeVariants } diff --git a/components/ui/card.tsx b/components/ui/card.tsx new file mode 100644 index 0000000..bdb5bde --- /dev/null +++ b/components/ui/card.tsx @@ -0,0 +1,103 @@ +import * as React from "react" + +import { cn } from "@/lib/utils" + +function Card({ + className, + size = "default", + ...props +}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) { + return ( +
img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl", + className + )} + {...props} + /> + ) +} + +function CardHeader({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardTitle({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardDescription({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardAction({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardContent({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +function CardFooter({ className, ...props }: React.ComponentProps<"div">) { + return ( +
+ ) +} + +export { + Card, + CardHeader, + CardFooter, + CardTitle, + CardAction, + CardDescription, + CardContent, +} diff --git a/components/ui/separator.tsx b/components/ui/separator.tsx new file mode 100644 index 0000000..6e1369e --- /dev/null +++ b/components/ui/separator.tsx @@ -0,0 +1,25 @@ +"use client" + +import { Separator as SeparatorPrimitive } from "@base-ui/react/separator" + +import { cn } from "@/lib/utils" + +function Separator({ + className, + orientation = "horizontal", + ...props +}: SeparatorPrimitive.Props) { + return ( + + ) +} + +export { Separator }