mirror of
https://github.com/stack-auth/stack.git
synced 2026-06-30 21:01:54 +08:00
3ef9cb3acf
Some checks failed
all-good: Did all the other checks pass? / all-good (push) Has been cancelled
Ensure Prisma migrations are in sync with the schema / check_prisma_migrations (22.x) (push) Has been cancelled
Docker Server Build and Push / Docker Build and Push Server (push) Has been cancelled
Docker Server Build and Run / docker (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (mock, 22.x) (push) Has been cancelled
Runs E2E API Tests / E2E Tests (Node ${{ matrix.node-version }}, Freestyle ${{ matrix.freestyle-mode }}) (prod, 22.x) (push) Has been cancelled
Runs E2E API Tests with custom port prefix / build (22.x) (push) Has been cancelled
Runs E2E API Tests with external source of truth / build (22.x) (push) Has been cancelled
Lint & build / lint_and_build (latest) (push) Has been cancelled
Dev Environment Test With Custom Base Port / restart-dev-and-test-with-custom-base-port (push) Has been cancelled
Dev Environment Test / restart-dev-and-test (push) Has been cancelled
Run setup tests with custom base port / setup-tests-with-custom-base-port (push) Has been cancelled
Run setup tests / setup-tests (push) Has been cancelled
TOC Generator / TOC Generator (push) Has been cancelled
<!-- Make sure you've read the CONTRIBUTING.md guidelines: https://github.com/stack-auth/stack-auth/blob/dev/CONTRIBUTING.md --> Updates all icons to Phosphor and removes lucide as dependency. <!-- This is an auto-generated comment: release notes by coderabbit.ai --> ## Summary by CodeRabbit * **Style** * Unified and refreshed iconography across the dashboard (pages, widgets, controls, dialogs, navigation, lists) for a more consistent, modern visual experience — purely visual, no behavior changes. * **Chores** * Migrated to a single icon set across the project and removed the previous icon library; updated documentation package to include the new icon dependency. <sub>✏️ Tip: You can customize this high-level summary in your review settings.</sub> <!-- end of auto-generated comment: release notes by coderabbit.ai -->
91 lines
3.1 KiB
TypeScript
91 lines
3.1 KiB
TypeScript
'use client';
|
|
|
|
import { CopyButton, SimpleTooltip } from "@/components/ui";
|
|
import { useThemeWatcher } from '@/lib/theme';
|
|
import { cn } from '@/lib/utils';
|
|
import { CodeIcon, TerminalWindowIcon } from "@phosphor-icons/react";
|
|
import type { ReactNode } from 'react';
|
|
import { PrismLight as SyntaxHighlighter } from 'react-syntax-highlighter';
|
|
import bash from 'react-syntax-highlighter/dist/esm/languages/prism/bash';
|
|
import python from 'react-syntax-highlighter/dist/esm/languages/prism/python';
|
|
import tsx from 'react-syntax-highlighter/dist/esm/languages/prism/tsx';
|
|
import typescript from 'react-syntax-highlighter/dist/esm/languages/prism/typescript';
|
|
import { dark, prism } from 'react-syntax-highlighter/dist/esm/styles/prism';
|
|
|
|
Object.entries({ tsx, bash, typescript, python }).forEach(([key, value]) => {
|
|
SyntaxHighlighter.registerLanguage(key, value);
|
|
});
|
|
|
|
type CodeBlockProps = {
|
|
language: string,
|
|
content: string,
|
|
customRender?: ReactNode,
|
|
title: string,
|
|
icon: 'terminal' | 'code',
|
|
maxHeight?: number,
|
|
compact?: boolean,
|
|
tooltip?: ReactNode,
|
|
fullWidth?: boolean,
|
|
neutralBackground?: boolean,
|
|
noSeparator?: boolean,
|
|
};
|
|
|
|
export function CodeBlock(props: CodeBlockProps) {
|
|
const { theme, mounted } = useThemeWatcher();
|
|
|
|
let icon = null;
|
|
switch (props.icon) {
|
|
case 'terminal': {
|
|
icon = <TerminalWindowIcon className={cn("w-4 h-4", props.compact && "w-3 h-3")} />;
|
|
break;
|
|
}
|
|
case 'code': {
|
|
icon = <CodeIcon className={cn("w-4 h-4", props.compact && "w-3 h-3")} />;
|
|
break;
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className={cn("overflow-hidden", !props.fullWidth && "rounded-xl", props.neutralBackground ? "bg-background" : "bg-muted")}>
|
|
<div className={cn("text-muted-foreground font-medium pl-4 pr-2 text-sm flex justify-between items-center", props.compact && !props.noSeparator && "py-1", !props.compact && !props.noSeparator && "py-2", props.noSeparator && "pt-1 pb-0", !props.noSeparator && "border-b")}>
|
|
<h5 className={cn("font-medium flex items-center gap-2", props.compact && "text-xs")}>
|
|
{icon}
|
|
{props.title}
|
|
</h5>
|
|
<div className="flex items-center gap-2">
|
|
{props.tooltip && (
|
|
<SimpleTooltip type="info" tooltip={props.tooltip} />
|
|
)}
|
|
<CopyButton content={props.content} variant={props.neutralBackground ? "ghost" : "secondary"} />
|
|
</div>
|
|
</div>
|
|
<div className="overflow-x-auto">
|
|
{props.customRender ?? <SyntaxHighlighter
|
|
language={props.language}
|
|
style={theme === 'dark' ? dark : prism}
|
|
customStyle={{
|
|
background: 'transparent',
|
|
padding: '1em',
|
|
border: 0,
|
|
boxShadow: 'none',
|
|
margin: 0,
|
|
fontSize: '0.875rem',
|
|
maxHeight: props.maxHeight,
|
|
overflow: 'auto',
|
|
whiteSpace: 'pre-wrap',
|
|
wordBreak: 'break-word',
|
|
...(props.compact && {
|
|
padding: '0.75em',
|
|
fontSize: '0.75rem',
|
|
}),
|
|
}}
|
|
wrapLines
|
|
wrapLongLines
|
|
>
|
|
{props.content}
|
|
</SyntaxHighlighter>}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|