75 lines
2.6 KiB
JavaScript
75 lines
2.6 KiB
JavaScript
'use client';
|
|
|
|
import { Button } from '@/components/ui/button';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
|
|
import { cn } from '@/lib/utils';
|
|
import { useMitt } from '@/plugins/MittContext';
|
|
import CoinIcon from '@/reusables/coin-icon';
|
|
import { useEffect, useState } from 'react';
|
|
|
|
const EditorAISheet = () => {
|
|
const [isOpen, setIsOpen] = useState(false);
|
|
const [prompt, setPrompt] = useState('');
|
|
const emitter = useMitt();
|
|
|
|
useEffect(() => {
|
|
const openSheetListener = () => {
|
|
setIsOpen(true);
|
|
};
|
|
|
|
emitter.on('open-ai-editor-sheet', openSheetListener);
|
|
|
|
return () => {
|
|
emitter.off('open-ai-editor-sheet', openSheetListener);
|
|
};
|
|
}, [emitter]);
|
|
|
|
const handleOpenChange = (open) => {
|
|
setIsOpen(open);
|
|
};
|
|
|
|
const handleSend = () => {
|
|
if (prompt.trim()) {
|
|
console.log('Sending prompt:', prompt);
|
|
setPrompt('');
|
|
}
|
|
};
|
|
|
|
return (
|
|
<Sheet open={isOpen} onOpenChange={handleOpenChange}>
|
|
<SheetContent side="bottom" className="gap-0! rounded-t-4xl pb-1">
|
|
<SheetHeader className="mb-2">
|
|
<SheetTitle className="text-center text-2xl font-semibold">What can I help with?</SheetTitle>
|
|
<SheetDescription className="hidden"></SheetDescription>
|
|
</SheetHeader>
|
|
|
|
<div className="mx-auto w-full max-w-[600px] space-y-4 px-4 pb-4">
|
|
<div className="space-y-3">
|
|
<Input
|
|
placeholder="Make a meme for e.g. work life stress"
|
|
value={prompt}
|
|
onChange={(e) => setPrompt(e.target.value)}
|
|
className="bg-muted/30 max-h-20 min-h-12 resize-none rounded-3xl border-0 p-4 text-base"
|
|
/>
|
|
<Button
|
|
onClick={handleSend}
|
|
className={cn('w-full rounded-full', !prompt.trim() && 'invisible')}
|
|
size="lg"
|
|
variant="outline"
|
|
disabled={!prompt.trim()}
|
|
>
|
|
Generate Meme
|
|
<div className="flex items-center gap-1">
|
|
<CoinIcon></CoinIcon> 1
|
|
</div>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</SheetContent>
|
|
</Sheet>
|
|
);
|
|
};
|
|
|
|
export default EditorAISheet;
|