修复一下移动端效果

This commit is contained in:
wood chen 2025-02-22 15:41:27 +08:00
parent 54b3d8e661
commit 0fe8bfc6aa
2 changed files with 19 additions and 11 deletions

View File

@ -148,7 +148,7 @@ export default function HomePage() {
<Section className="border-t bg-gray-50 py-24 dark:bg-gray-800">
<Container>
<div className="mx-auto max-w-4xl">
<Card className="overflow-hidden border-2 p-6">
<Card className="overflow-hidden border-2 p-2 sm:p-6">
<CardHeader className="bg-white dark:bg-gray-900">
<CardTitle className="text-2xl">
()
@ -159,7 +159,7 @@ export default function HomePage() {
</CardDescription>
</CardHeader>
<CardContent className="bg-white p-0 dark:bg-gray-900">
<CardContent className="overflow-x-auto bg-white p-0 dark:bg-gray-900">
<Tabs defaultValue="auth" className="w-full">
<TabsList className="grid w-full grid-cols-3">
<TabsTrigger value="auth">
@ -202,7 +202,7 @@ export default function HomePage() {
<Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" />
<AlertTitle></AlertTitle>
<AlertDescription className="font-mono">
<AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
GET https://connect.q58.club/oauth/authorize
</AlertDescription>
</Alert>
@ -229,7 +229,7 @@ window.location.href = authUrl;`}
<p className="mb-2">
</p>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm">
https://your-app.com/callback?code=ac_xxxxxx...
</code>
@ -267,7 +267,7 @@ window.location.href = authUrl;`}
<Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" />
<AlertTitle></AlertTitle>
<AlertDescription className="font-mono">
<AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
POST
https://connect.q58.club/api/oauth/access_token
</AlertDescription>
@ -294,7 +294,7 @@ window.location.href = authUrl;`}
<ArrowDownToLine className="h-4 w-4" />
<AlertTitle></AlertTitle>
<AlertDescription>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm">
{`{
"access_token": "at_xxxxxxxx", // 访问令牌
@ -328,7 +328,7 @@ window.location.href = authUrl;`}
<Alert className="border-l-4 border-l-primary">
<Code2 className="h-4 w-4" />
<AlertTitle></AlertTitle>
<AlertDescription className="font-mono">
<AlertDescription className="whitespace-pre-wrap break-words font-mono text-xs sm:text-sm">
GET https://connect.q58.club/api/oauth/user
</AlertDescription>
</Alert>
@ -348,7 +348,7 @@ window.location.href = authUrl;`}
<ArrowDownToLine className="h-4 w-4" />
<AlertTitle></AlertTitle>
<AlertDescription>
<pre className="mt-2 overflow-x-auto rounded bg-gray-100 p-4 dark:bg-gray-800">
<pre className="mt-2 overflow-x-auto whitespace-pre-wrap break-words rounded bg-gray-100 p-2 text-xs dark:bg-gray-800 sm:p-4 sm:text-sm">
<code className="text-sm">
{`{
"id": "user_xxx", // 用户唯一标识

View File

@ -3,6 +3,8 @@
import { useState } from "react";
import { Check, Copy } from "lucide-react";
import { cn } from "@/lib/utils";
function CopyButton({ text }: { text: string }) {
const [copied, setCopied] = useState(false);
@ -26,10 +28,16 @@ function CopyButton({ text }: { text: string }) {
);
}
export function CodeBlock({ children }: { children: string }) {
export function CodeBlock({
children,
className,
}: {
children: string;
className?: string;
}) {
return (
<div className="relative">
<pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800">
<div className={cn("relative", className)}>
<pre className="overflow-x-auto rounded-lg bg-gray-100 p-4 dark:bg-gray-800 sm:text-sm">
<code className="text-sm">{children}</code>
</pre>
<CopyButton text={children} />