show extension or fallback to language

Author: gabrielmfern

packages/preview-server/src/components/code-container.tsx

@@ -13,19 +13,20 @@ import { Tooltip } from './tooltip';
 
 interface CodeContainerProps {
   markups: MarkupProps[];
-  filename: string;
+  basename: string;
   activeLang: string;
   setActiveLang: (lang: string) => void;
 }
 
 interface MarkupProps {
   language: Language;
+  extension?: string;
   content: string;
 }
 
 export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
   markups,
-  filename,
+  basename: filename,
   activeLang,
   setActiveLang,
 }) => {
@@ -84,7 +85,7 @@ export const CodeContainer: React.FC<Readonly<CodeContainerProps>> = ({
         <CopyToClipboardButton content={activeMarkup.content} />
         <DownloadButton
           content={activeMarkup.content}
-          filename={`${filename}.${activeMarkup.language}`}
+          filename={`${filename}.${activeMarkup.extension || activeMarkup.language}`}
         />
       </div>
       <div className="h-[calc(100%-2.25rem)]">