60 lines
1.6 KiB
TypeScript
60 lines
1.6 KiB
TypeScript
|
'use client';
|
||
|
|
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { useState } from 'react';
|
||
|
|
|
||
|
|
import { UISuggestion } from '@/lib/editor/suggestions';
|
||
|
|
|
||
|
|
import { CrossIcon, MessageIcon } from './icons';
|
||
|
|
import { Button } from '../ui/button';
|
||
|
|
|
||
|
|
export const Suggestion = ({
|
||
|
|
suggestion,
|
||
|
|
onApply,
|
||
|
|
}: {
|
||
|
|
suggestion: UISuggestion;
|
||
|
|
onApply: () => void;
|
||
|
|
}) => {
|
||
|
|
const [isExpanded, setIsExpanded] = useState(false);
|
||
|
|
|
||
|
|
return !isExpanded ? (
|
||
|
|
<div
|
||
|
|
className="absolute cursor-pointer text-muted-foreground mt-1 -right-8"
|
||
|
|
onClick={() => {
|
||
|
|
setIsExpanded(true);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<MessageIcon size={14} />
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<motion.div
|
||
|
|
className="absolute bg-background p-3 flex flex-col gap-3 rounded-2xl border text-sm w-56 shadow-xl z-50 -right-12 md:-right-20"
|
||
|
|
transition={{ type: 'spring', stiffness: 500, damping: 30 }}
|
||
|
|
whileHover={{ scale: 1.05 }}
|
||
|
|
>
|
||
|
|
<div className="flex flex-row items-center justify-between">
|
||
|
|
<div className="flex flex-row items-center gap-2">
|
||
|
|
<div className="size-4 bg-muted-foreground/25 rounded-full" />
|
||
|
|
<div className="font-medium">Assistant</div>
|
||
|
|
</div>
|
||
|
|
<div
|
||
|
|
className="text-xs text-gray-500 cursor-pointer"
|
||
|
|
onClick={() => {
|
||
|
|
setIsExpanded(false);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<CrossIcon size={12} />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<div>{suggestion.description}</div>
|
||
|
|
<Button
|
||
|
|
variant="outline"
|
||
|
|
className="w-fit py-1.5 px-3 rounded-full"
|
||
|
|
onClick={onApply}
|
||
|
|
>
|
||
|
|
Apply
|
||
|
|
</Button>
|
||
|
|
</motion.div>
|
||
|
|
);
|
||
|
|
};
|