LukeParke/better-auth
1
0
Fork 0
mirror of https://github.com/LukeHagar/better-auth.git synced 2025-12-10 12:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs(api-method): fixed syntax highlighting refreshing on tab change (#4309)

Browse Source
This commit is contained in:
Maxwell
2025-08-30 15:35:44 +10:00
committed by Alex Yang
parent 029268fad0
commit 34afa659de
3 changed files with 131 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
docs/components/api-method.tsx
View File

@@ -9,7 +9,12 @@ import {
TableHeader,
TableRow,
} from "./ui/table";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./ui/tabs";
import {
ApiMethodTabs,
ApiMethodTabsContent,
ApiMethodTabsList,
ApiMethodTabsTrigger,
} from "./api-method-tabs";
import { JSX, ReactNode } from "react";
import { Link } from "lucide-react";
import { Button } from "./ui/button";
@@ -153,12 +158,12 @@ export const APIMethod = ({
className="absolute invisible -top-[100px]"
/>
</div>
<Tabs
<ApiMethodTabs
defaultValue={isServerOnly ? "server" : "client"}
className="w-full gap-0"
className="gap-0 w-full"
>
<TabsList className="relative flex justify-start w-full p-0 bg-transparent hover:[&>div>a>button]:opacity-100">
<TabsTrigger
<ApiMethodTabsList className="relative flex justify-start w-full p-0 bg-transparent hover:[&>div>a>button]:opacity-100">
<ApiMethodTabsTrigger
value="client"
className="transition-all duration-150 ease-in-out max-w-[100px] data-[state=active]:bg-border hover:bg-border/50 bg-border/50 border hover:border-primary/15 cursor-pointer data-[state=active]:border-primary/10 rounded-none"
>
@@ -179,8 +184,8 @@ export const APIMethod = ({
<path fill="none" d="M0 0h36v36H0z" />
</svg>
<span>Client</span>
</TabsTrigger>
<TabsTrigger
</ApiMethodTabsTrigger>
<ApiMethodTabsTrigger
value="server"
className="transition-all duration-150 ease-in-out max-w-[100px] data-[state=active]:bg-border hover:bg-border/50 bg-border/50 border hover:border-primary/15 cursor-pointer data-[state=active]:border-primary/10 rounded-none"
>
@@ -196,20 +201,20 @@ export const APIMethod = ({
/>
</svg>
<span>Server</span>
</TabsTrigger>
</ApiMethodTabsTrigger>
<div className="absolute right-0">
<a href={`#api-method${pathId}`}>
<Button
variant="ghost"
className="transition-all duration-150 ease-in-out scale-90 opacity-100 md:opacity-0"
className="opacity-100 transition-all duration-150 ease-in-out scale-90 md:opacity-0"
size={"icon"}
>
<Link className="size-4" />
</Button>
</a>
</div>
</TabsList>
<TabsContent value="client">
</ApiMethodTabsList>
<ApiMethodTabsContent value="client">
{isServerOnly ? null : (
<Endpoint
method={method || "GET"}
@@ -228,7 +233,7 @@ export const APIMethod = ({
) : null}
</Note>
) : null}
<div className={cn("w-full relative")}>
<div className={cn("relative w-full")}>
<DynamicCodeBlock
code={`${code_prefix}${
noResult
@@ -240,14 +245,14 @@ export const APIMethod = ({
lang="ts"
/>
{isServerOnly ? (
<div className="absolute inset-0 flex items-center justify-center w-full h-full border rounded-lg backdrop-brightness-50 backdrop-blur-xs border-border">
<div className="flex absolute inset-0 justify-center items-center w-full h-full rounded-lg border backdrop-brightness-50 backdrop-blur-xs border-border">
<span>This is a server-only endpoint</span>
</div>
) : null}
</div>
{!isServerOnly ? <TypeTable props={props} isServer={false} /> : null}
</TabsContent>
<TabsContent value="server">
</ApiMethodTabsContent>
<ApiMethodTabsContent value="server">
{isClientOnly ? null : (
<Endpoint
method={method || "GET"}
@@ -267,17 +272,17 @@ export const APIMethod = ({
) : null}
</Note>
) : null}
<div className={cn("w-full relative")}>
<div className={cn("relative w-full")}>
{serverCodeBlock}
{isClientOnly ? (
<div className="absolute inset-0 flex items-center justify-center w-full h-full border rounded-lg backdrop-brightness-50 backdrop-blur-xs border-border">
<div className="flex absolute inset-0 justify-center items-center w-full h-full rounded-lg border backdrop-brightness-50 backdrop-blur-xs border-border">
<span>This is a client-only endpoint</span>
</div>
) : null}
</div>
{!isClientOnly ? <TypeTable props={props} isServer /> : null}
</TabsContent>
</Tabs>
</ApiMethodTabsContent>
</ApiMethodTabs>
</>
);
};
@@ -328,7 +333,7 @@ function TypeTable({
if (!props.length) return null;
return (
<Table className="mt-2 mb-0 overflow-hidden">
<Table className="overflow-hidden mt-2 mb-0">
<TableHeader>
<TableRow>
<TableHead className="text-primary w-[100px]">Prop</TableHead>
@@ -354,7 +359,7 @@ function TypeTable({
) : null}
</TableCell>
<TableCell className="max-w-[500px] overflow-hidden">
<div className="w-full break-words h-fit text-wrap ">
<div className="w-full break-words h-fit text-wrap">
{tsxifyBackticks(prop.description ?? "")}
</div>
</TableCell>
@@ -709,8 +714,8 @@ function createServerBody({
function Note({ children }: { children: ReactNode }) {
return (
<div className="relative flex flex-col w-full gap-2 p-3 mb-2 break-words border rounded-md text-md text-wrap border-border bg-fd-secondary/50">
<span className="w-full -mb-1 text-xs select-none text-muted-foreground">
<div className="flex relative flex-col gap-2 p-3 mb-2 w-full break-words rounded-md border text-md text-wrap border-border bg-fd-secondary/50">
<span className="-mb-1 w-full text-xs select-none text-muted-foreground">
Notes
</span>
<p className="mt-0 mb-0 text-sm">{children as any}</p>