63 lines
2.2 KiB
TypeScript
63 lines
2.2 KiB
TypeScript
|
import Image, { StaticImageData } from 'next/image';
|
||
|
|
import { Star } from 'lucide-react';
|
||
|
|
import { motion } from 'framer-motion';
|
||
|
|
import { RiTwitterXLine } from "react-icons/ri";
|
||
|
|
import { SiGithub , SiGitbook } from "react-icons/si";
|
||
|
|
|
||
|
|
interface StarredChatProps {
|
||
|
|
title: string;
|
||
|
|
isStarred: boolean;
|
||
|
|
onClick: () => void;
|
||
|
|
onStar: (e: React.MouseEvent) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const StarredChat = ({ title, isStarred, onClick, onStar }: StarredChatProps) => (
|
||
|
|
<motion.button
|
||
|
|
className="w-full flex items-center justify-between p-2 hover:bg-gray-50 rounded-lg group"
|
||
|
|
onClick={onClick}
|
||
|
|
whileHover={{ scale: 1.02 }}
|
||
|
|
whileTap={{ scale: 0.98 }}
|
||
|
|
>
|
||
|
|
<span className="text-sm text-gray-700 truncate">{title}</span>
|
||
|
|
<Star
|
||
|
|
className={`w-4 h-4 ${isStarred ? 'text-blue-500' : 'text-gray-300 opacity-0 group-hover:opacity-100'}`}
|
||
|
|
onClick={(e) => {
|
||
|
|
e.stopPropagation();
|
||
|
|
onStar(e);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</motion.button>
|
||
|
|
);
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
interface SidebarHeaderProps {
|
||
|
|
onNewChat: () => void;
|
||
|
|
logo: StaticImageData;
|
||
|
|
}
|
||
|
|
|
||
|
|
export const SidebarHeader = ({ onNewChat, logo }: SidebarHeaderProps) => (
|
||
|
|
<div className="p-4 border-b">
|
||
|
|
<div className="flex items-center justify-between mb-10">
|
||
|
|
<Image src={logo} alt="Almaze Logo" width={26} />
|
||
|
|
<div className="flex items-center space-x-4 mt-1">
|
||
|
|
<a href="https://x.com/almaze_ai" target='_blank'>
|
||
|
|
<RiTwitterXLine className='cursor-pointer text-gray-600 hover:text-gray-800 transition-colors'/>
|
||
|
|
</a>
|
||
|
|
<a href="https://almaze.gitbook.io/docs/" target='_blank'>
|
||
|
|
<SiGitbook className='cursor-pointer text-gray-600 hover:text-gray-800 transition-colors'/>
|
||
|
|
</a>
|
||
|
|
<a href="https://github.com/Almaze-Labs" target='_blank'>
|
||
|
|
<SiGithub className='cursor-pointer text-gray-600 hover:text-gray-800 transition-colors'/>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<button
|
||
|
|
onClick={onNewChat}
|
||
|
|
className="w-full py-4 text-blue-500 border-2 border-dashed border-blue-200 rounded-lg bg-gradient-to-t from-[rgba(29,162,255,0.2)] to-[rgba(29,162,255,0)] hover:bg-blue-50 transition-colors text-sm"
|
||
|
|
>
|
||
|
|
⊕ Start a new chat
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|