p-sw/pswui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(react): update Code component styling

Browse Source 
Changed the styling of Code component in the 'LoadedCode.tsx' file. Specifically, the scrollbar was removed, and the types for the forwardRef function were restructured for improved code readability.
This commit is contained in:
p-sw 2024-06-11 19:31:25 +09:00
parent 8e6e691308
commit 937670bfea
1 changed files with 7 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/react/src/components/LoadedCode.tsx
View File

@ -1,4 +1,4 @@
import {forwardRef, useEffect, useState} from "react";
import { forwardRef, useEffect, useState } from "react";
import SyntaxHighlighter from "react-syntax-highlighter";
import { gruvboxDark } from "react-syntax-highlighter/dist/cjs/styles/hljs";
import { Button } from "@components/Button";
@ -63,7 +63,7 @@ export const LoadedCode = ({
<SyntaxHighlighter
language="typescript"
style={gruvboxDark}
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""}`}
className={`w-full h-64 rounded-lg ${!state ? "animate-pulse" : ""} scrollbar-none`}
customStyle={{ padding: "1rem" }}
>
{state ?? ""}
@ -72,11 +72,10 @@ export const LoadedCode = ({
);
};
export const Code = forwardRef<HTMLDivElement, { children: string; className?: string; language: string }>(({
children,
className,
language,
}, ref) => {
export const Code = forwardRef<
HTMLDivElement,
{ children: string; className?: string; language: string }
>(({ children, className, language }, ref) => {
const { toast } = useToast();
return (
@ -109,7 +108,7 @@ export const Code = forwardRef<HTMLDivElement, { children: string; className?: s
<SyntaxHighlighter
language={language}
style={gruvboxDark}
className={`w-full h-auto max-h-64 rounded-lg`}
className={`w-full h-auto max-h-64 rounded-lg scrollbar-none`}
customStyle={{ padding: "1rem" }}
>
{children}