Massbug/judge4c
2
0
Fork 0
mirror of https://github.com/massbug/judge4c.git synced 2025-05-18 07:16:34 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat(pre): add horizontal scrolling support for code blocks

Browse Source
This commit is contained in:
cfngc4594 2025-03-26 22:48:46 +08:00
parent 793db58e36
commit 2605b211bc
1 changed files with 10 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/content/pre.tsx
View File

@ -4,9 +4,10 @@ import { cn } from "@/lib/utils";
import { Button } from "@/components/ui/button"; import { Button } from "@/components/ui/button";
import { CheckIcon, CopyIcon } from "lucide-react"; import { CheckIcon, CopyIcon } from "lucide-react";
import { ReactNode, useRef, useState } from "react"; import { ReactNode, useRef, useState } from "react";
import { ScrollArea, ScrollBar } from "@/components/ui/scroll-area";
interface PreProps { interface PreProps {
children?: ReactNode, children?: ReactNode;
className?: string; className?: string;
} }
@ -53,7 +54,7 @@ export function Pre({
<div <div
className={cn( className={cn(
"transition-all", "transition-all",
copied ? "scale-100 opacity-100" : "scale-0 opacity-0", copied ? "scale-100 opacity-100" : "scale-0 opacity-0"
)} )}
> >
<CheckIcon className="stroke-emerald-500" size={16} aria-hidden="true" /> <CheckIcon className="stroke-emerald-500" size={16} aria-hidden="true" />
@ -61,15 +62,18 @@ export function Pre({
<div <div
className={cn( className={cn(
"absolute transition-all", "absolute transition-all",
copied ? "scale-0 opacity-0" : "scale-100 opacity-100", copied ? "scale-0 opacity-0" : "scale-100 opacity-100"
)} )}
> >
<CopyIcon size={16} aria-hidden="true" /> <CopyIcon size={16} aria-hidden="true" />
</div> </div>
</Button> </Button>
<pre ref={preRef} className={className} {...props}> <ScrollArea>
{children} <pre ref={preRef} className={className} {...props}>
</pre> {children}
</pre>
<ScrollBar orientation="horizontal" />
</ScrollArea>
</div> </div>
); );
} }