diff --git a/components/MakeRealButton.tsx b/components/MakeRealButton.tsx new file mode 100644 index 0000000..c3443ea --- /dev/null +++ b/components/MakeRealButton.tsx @@ -0,0 +1,52 @@ +import { TldrawUiButton, useDialogs } from 'tldraw' +import { useMakeReal } from '../hooks/useMakeReal' +import { SettingsDialog } from './SettingsDialog' + +export function MakeRealButton() { + const { addDialog } = useDialogs() + const makeReal = useMakeReal() + + return ( +
+ {/* Settings Button */} + { + addDialog({ + id: 'api keys', + component: SettingsDialog, + }) + }} + > + + {/* Settings icon path */} + + + + + {/* Make Real Button */} + +
+ ) +} \ No newline at end of file diff --git a/components/SettingsDialog.tsx b/components/SettingsDialog.tsx new file mode 100644 index 0000000..e055683 --- /dev/null +++ b/components/SettingsDialog.tsx @@ -0,0 +1,132 @@ +import { + TLUiDialogProps, + TldrawUiButton, + TldrawUiButtonLabel, + TldrawUiDialogBody, + TldrawUiDialogCloseButton, + TldrawUiDialogFooter, + TldrawUiDialogHeader, + TldrawUiDialogTitle, + TldrawUiIcon, + TldrawUiInput, + useReactor, + useValue, +} from 'tldraw' +import { Provider, makeRealSettings } from '../makeRealSettings' + +export function SettingsDialog({ onClose }: TLUiDialogProps) { + // Get settings and set up local storage sync + const settings = useValue('settings', () => makeRealSettings.get(), []) + + useReactor( + 'update settings local storage', + () => { + localStorage.setItem('makereal_settings_2', JSON.stringify(makeRealSettings.get())) + }, + [] + ) + + return ( + <> + + Settings + + + + + {/* Provider Selection */} +
+
+ +
+ +
+ + {/* API Keys Section */} +
+ {Provider.map((provider: any) => { + if (provider.id === 'google') return null + const value = settings.keys[provider.id] + return ( + + ) + })} + + {/* Save Button */} + + { + onClose() + }} + > + Save + + + + + ) +} + +// Helper component for API key inputs +function ApiKeyInput({ + provider, + value, + warning, +}: { + provider: (typeof Provider)[number] + value: string + warning: boolean +}) { + const isValid = value.length === 0 || provider.validate(value) + + return ( +
+
+ + + + +
+ { + makeRealSettings.update((s) => ({ + ...s, + keys: { ...s.keys, [provider.id]: value } + })) + }} + /> +
+ ) +} \ No newline at end of file diff --git a/hooks/useMakeReal.ts b/hooks/useMakeReal.ts new file mode 100644 index 0000000..c2c9e30 --- /dev/null +++ b/hooks/useMakeReal.ts @@ -0,0 +1,35 @@ +import { useCallback } from 'react' +import { useEditor } from 'tldraw' +import { makeRealSettings } from '../makeRealSettings' + +export function useMakeReal() { + const editor = useEditor() + + return useCallback(async () => { + const settings = makeRealSettings.get() + + // Get the current selection from the canvas + const shapes = editor.getSelectedShapes() + + try { + // Make API request with the selected shapes + const response = await fetch('/api/make-real', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ + shapes, + apiKey: settings.apiKey, + provider: settings.provider, + }), + }) + + const result = await response.json() + // Handle the result + + } catch (error) { + console.error('Error making real:', error) + } + }, [editor]) +} \ No newline at end of file diff --git a/makeRealSettings.ts b/makeRealSettings.ts new file mode 100644 index 0000000..0b5730a --- /dev/null +++ b/makeRealSettings.ts @@ -0,0 +1,23 @@ +type Settings = { + apiKey: string + provider: 'anthropic' | 'openai' +} + +class MakeRealSettings { + private settings: Settings = { + apiKey: '', + provider: 'anthropic', + } + + get() { + return this.settings + } + + set(settings: Partial) { + this.settings = { ...this.settings, ...settings } + localStorage.setItem('makereal_settings_2', JSON.stringify(this.settings)) + } +} + +export const makeRealSettings = new MakeRealSettings() +export const Provider = makeRealSettings.get().provider \ No newline at end of file diff --git a/pages/index.tsx b/pages/index.tsx new file mode 100644 index 0000000..0519ecb --- /dev/null +++ b/pages/index.tsx @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/ui/components.tsx b/src/ui/components.tsx index ed302a7..2a15302 100644 --- a/src/ui/components.tsx +++ b/src/ui/components.tsx @@ -2,9 +2,11 @@ import { CustomMainMenu } from "./CustomMainMenu" import { CustomToolbar } from "./CustomToolbar" import { CustomContextMenu } from "./CustomContextMenu" import { TLComponents } from "tldraw" +import { MakeRealButton } from "../../components/MakeRealButton" export const components: TLComponents = { Toolbar: CustomToolbar, MainMenu: CustomMainMenu, ContextMenu: CustomContextMenu, + SharePanel: MakeRealButton, }