Insight Dashboard

Author: MananTank

apps/dashboard/src/@/components/ui/DynamicHeight.tsx

@@ -34,7 +34,7 @@ export function DynamicHeight(props: {
   );
 }
 
-function useHeightObserver() {
+export function useHeightObserver() {
   const elementRef = useRef<HTMLDivElement>(null);
   const [height, setHeight] = useState<number | undefined>();
 

apps/dashboard/src/@/components/ui/ScrollShadow/ScrollShadow.module.css

@@ -2,14 +2,14 @@
   position: absolute;
   left: 0;
   width: 100%;
-  height: 40px;
+  height: 32px;
   pointer-events: none;
 }
 
 .scrollShadowX {
   position: absolute;
   top: 0;
-  width: 40px;
+  width: 32px;
   height: 100%;
   pointer-events: none;
 }

apps/dashboard/src/@/components/ui/code/CodeBlockContainer.tsx

@@ -11,7 +11,9 @@ export function CodeBlockContainer(props: {
   children: React.ReactNode;
   className?: string;
   scrollableClassName?: string;
+  scrollableContainerClassName?: string;
   copyButtonClassName?: string;
+  shadowColor?: string;
 }) {
   const { hasCopied, onCopy } = useClipboard(props.codeToCopy);
 
@@ -24,8 +26,11 @@ export function CodeBlockContainer(props: {
     >
       <ScrollShadow
         scrollableClassName={cn("p-4", props.scrollableClassName)}
-        className="text-xs md:text-sm [&_*]:leading-relaxed"
-        shadowColor="hsl(var(--muted))"
+        className={cn(
+          "text-xs md:text-sm [&_*]:leading-relaxed",
+          props.scrollableContainerClassName,
+        )}
+        shadowColor={props.shadowColor || "hsl(var(--muted))"}
       >
         {props.children}
       </ScrollShadow>

apps/dashboard/src/@/components/ui/code/RenderCode.tsx

@@ -6,13 +6,17 @@ export function RenderCode(props: {
   className?: string;
   scrollableClassName?: string;
   copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
 }) {
   return (
     <CodeBlockContainer
       codeToCopy={props.code}
       className={props.className}
       copyButtonClassName={props.copyButtonClassName}
       scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
     >
       <div
         // biome-ignore lint/security/noDangerouslySetInnerHtml: we know what we're doing here

apps/dashboard/src/@/components/ui/code/code.client.tsx

@@ -12,6 +12,8 @@ export type CodeProps = {
   scrollableClassName?: string;
   keepPreviousDataOnCodeChange?: boolean;
   copyButtonClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
 };
 
 export const CodeClient: React.FC<CodeProps> = ({
@@ -21,6 +23,8 @@ export const CodeClient: React.FC<CodeProps> = ({
   scrollableClassName,
   keepPreviousDataOnCodeChange = false,
   copyButtonClassName,
+  scrollableContainerClassName,
+  shadowColor,
 }) => {
   const codeQuery = useQuery({
     queryKey: ["html", code],
@@ -38,6 +42,8 @@ export const CodeClient: React.FC<CodeProps> = ({
         className={className}
         scrollableClassName={scrollableClassName}
         copyButtonClassName={copyButtonClassName}
+        scrollableContainerClassName={scrollableContainerClassName}
+        shadowColor={shadowColor}
       />
     );
   }
@@ -49,6 +55,8 @@ export const CodeClient: React.FC<CodeProps> = ({
       className={className}
       scrollableClassName={scrollableClassName}
       copyButtonClassName={copyButtonClassName}
+      scrollableContainerClassName={scrollableContainerClassName}
+      shadowColor={shadowColor}
     />
   );
 };

apps/dashboard/src/@/components/ui/code/getCodeHtml.tsx

@@ -10,9 +10,7 @@ function isPrettierSupportedLang(lang: BundledLanguage) {
     lang === "ts" ||
     lang === "tsx" ||
     lang === "javascript" ||
-    lang === "typescript" ||
-    lang === "css" ||
-    lang === "json"
+    lang === "typescript"
   );
 }
 

apps/dashboard/src/@/components/ui/code/plaintext-code.tsx

@@ -7,13 +7,17 @@ export function PlainTextCodeBlock(props: {
   className?: string;
   scrollableClassName?: string;
   codeClassName?: string;
+  scrollableContainerClassName?: string;
+  shadowColor?: string;
 }) {
   return (
     <CodeBlockContainer
       codeToCopy={props.code}
       className={props.className}
       copyButtonClassName={props.copyButtonClassName}
       scrollableClassName={props.scrollableClassName}
+      scrollableContainerClassName={props.scrollableContainerClassName}
+      shadowColor={props.shadowColor}
     >
       <code className={cn("block whitespace-pre", props.codeClassName)}>
         {props.code}