diff --git a/components/editor/code-panel.tsx b/components/editor/code-panel.tsx index c74ccc66..2e0ea4fb 100644 --- a/components/editor/code-panel.tsx +++ b/components/editor/code-panel.tsx @@ -1,6 +1,6 @@ import React, { useState } from "react"; import { Button } from "@/components/ui/button"; -import { Copy, Check } from "lucide-react"; +import { Copy, Check, AlertTriangle } from "lucide-react"; import { ThemeEditorState } from "@/types/editor"; import { ScrollArea, ScrollBar } from "../ui/scroll-area"; import { ColorFormat } from "../../types"; @@ -15,6 +15,8 @@ import { usePostHog } from "posthog-js/react"; import { useEditorStore } from "@/store/editor-store"; import { usePreferencesStore } from "@/store/preferences-store"; import { generateThemeCode } from "@/utils/theme-style-generator"; +import { useThemePresetStore } from "@/store/theme-preset-store"; +import { Alert, AlertDescription, AlertTitle } from "../ui/alert"; interface CodePanelProps { themeEditorState: ThemeEditorState; @@ -37,6 +39,10 @@ const CodePanel: React.FC = ({ themeEditorState }) => { (state) => state.setPackageManager ); + const isSavedPreset = + preset && + useThemePresetStore((state) => state.getPreset(preset)?.source === "SAVED"); + const code = generateThemeCode( themeEditorState, colorFormat, @@ -96,7 +102,7 @@ const CodePanel: React.FC = ({ themeEditorState }) => {

Theme Code

- {preset && preset !== "default" && ( + {preset && preset !== "default" && !isSavedPreset && (
{(["pnpm", "npm", "yarn", "bun"] as const).map((pm) => ( @@ -141,6 +147,20 @@ const CodePanel: React.FC = ({ themeEditorState }) => {
)} + {isSavedPreset && ( + + + + Registry commands are not supported for saved themes yet + + Coming Soon + + + + You can still copy and use the theme code directly. + + + )}