litchi/mine-code-now
1
0
Fork 0
mirror of https://litchi.icu/ngc2207/mine-code-now.git synced 2025-05-18 19:56:36 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: add snippet-show-form in snippet-card

Browse Source
This commit is contained in:
ngc2207 2024-11-22 21:07:25 +08:00
parent 75b56b4887
commit 15c53ee086
2 changed files with 44 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
src/app/dashboard/snippets/components/snippet-card.tsx
View File

@ -20,7 +20,7 @@ import {
import { cn } from "@/lib/utils"; import { cn } from "@/lib/utils";
import { Snippet } from "@prisma/client"; import { Snippet } from "@prisma/client";
import { Badge } from "@/components/ui/badge"; import { Badge } from "@/components/ui/badge";
import { ScrollArea } from "@/components/ui/scroll-area"; import { SnippetShowForm } from "./snippet-show-form";
const languageIcons = { const languageIcons = {
c: { icon: COriginal }, c: { icon: COriginal },
@ -54,7 +54,7 @@ export function SnippetCard({
const renderLanguageBadge = () => ( const renderLanguageBadge = () => (
<Badge <Badge
variant="secondary" variant="secondary"
className="rounded-xl flex items-center justify-between whitespace-nowrap h-6" className="rounded-xl flex items-center justify-between whitespace-nowrap h-6 px-0"
> >
<div className="flex items-center gap-1"> <div className="flex items-center gap-1">
{languageInfo?.icon && <languageInfo.icon />} {languageInfo?.icon && <languageInfo.icon />}
@ -71,19 +71,15 @@ export function SnippetCard({
); );
return ( return (
<Card className={cn("flex flex-col", className)} {...props}> <Card className={cn("flex flex-col h-72 w-auto", className)} {...props}>
<CardHeader className="flex flex-col flex-none p-0"> <CardHeader className="flex flex-none p-0">
<CardTitle className="h-8 p-2 pl-4 flex items-center justify-between bg-muted rounded-t-xl"> <CardTitle className="h-8 px-4 py-2 flex items-center justify-between bg-muted rounded-t-xl">
<span className="truncate">{snippet.title}</span> <span className="truncate">{snippet.title}</span>
{renderLanguageBadge()} {renderLanguageBadge()}
</CardTitle> </CardTitle>
</CardHeader> </CardHeader>
<CardContent className="flex-grow overflow-hidden p-0"> <CardContent className="flex-grow overflow-hidden p-0">
<ScrollArea className="h-full border-y"> <SnippetShowForm snippet={snippet} />
<pre className="p-2 rounded-md overflow-auto whitespace-pre">
<code>{snippet.code}</code>
</pre>
</ScrollArea>
</CardContent> </CardContent>
<CardFooter className="flex-none h-6 p-2 pl-4 mb-0 bg-muted rounded-b-xl"> <CardFooter className="flex-none h-6 p-2 pl-4 mb-0 bg-muted rounded-b-xl">
{renderTimestamp()} {renderTimestamp()}

38
src/app/dashboard/snippets/components/snippet-show-form.tsx Normal file
View File

@ -0,0 +1,38 @@
"use client";
import { Snippet } from "@prisma/client";
import { Editor } from "@monaco-editor/react";
interface SnippetShowFormProps {
snippet: Snippet;
}
export function SnippetShowForm({ snippet }: SnippetShowFormProps) {
return (
<div className="flex-grow">
<Editor
height="100vh"
theme="vs-light"
language={snippet.language}
defaultValue={snippet.code}
options={{
readOnly: true,
minimap: { enabled: false },
scrollbar: {
vertical: "hidden",
horizontal: "hidden",
verticalScrollbarSize: 0,
horizontalScrollbarSize: 0,
},
scrollBeyondLastLine: false,
guides: {
bracketPairs: true,
indentation: true,
},
showFoldingControls: "always",
fontSize: 14,
}}
/>
</div>
);
}