|
1 |
| -import { BookmarkIcon, ChatBubbleLeftIcon } from "@heroicons/react/24/outline"; |
2 |
| -import { BookmarkIcon as BookmarkIconSolid } from "@heroicons/react/24/solid"; |
| 1 | +import { ChatBubbleLeftIcon } from "@heroicons/react/24/outline"; |
3 | 2 | import { SlashCommandDescription } from "core";
|
4 | 3 | import { useState } from "react";
|
5 |
| -import { defaultBorderRadius, GhostButton, vscInputBackground } from ".."; |
| 4 | +import { defaultBorderRadius, vscInputBackground } from ".."; |
6 | 5 |
|
7 | 6 | interface ConversationStarterCardProps {
|
8 | 7 | command: SlashCommandDescription;
|
9 | 8 | onClick: (command: SlashCommandDescription) => void;
|
10 |
| - onBookmark: (command: SlashCommandDescription) => void; |
11 |
| - isBookmarked: boolean; |
12 | 9 | }
|
13 | 10 |
|
14 | 11 | export function ConversationStarterCard({
|
15 | 12 | command,
|
16 | 13 | onClick,
|
17 |
| - onBookmark, |
18 |
| - isBookmarked = false, |
19 | 14 | }: ConversationStarterCardProps) {
|
20 | 15 | const [isHovered, setIsHovered] = useState(false);
|
21 | 16 |
|
22 | 17 | return (
|
23 | 18 | <div
|
24 |
| - className="mb-2 w-full shadow-md hover:brightness-110" |
| 19 | + className="mb-2 w-full shadow-md hover:cursor-pointer hover:brightness-110" |
25 | 20 | style={{
|
26 | 21 | borderRadius: defaultBorderRadius,
|
27 | 22 | backgroundColor: vscInputBackground,
|
28 | 23 | }}
|
29 | 24 | onMouseEnter={() => setIsHovered(true)}
|
30 | 25 | onMouseLeave={() => setIsHovered(false)}
|
| 26 | + onClick={() => onClick(command)} |
31 | 27 | >
|
32 |
| - <div className="flex items-center px-3 py-1.5"> |
33 |
| - <div className="mr-3 flex-shrink-0"> |
| 28 | + <div className="flex px-3 py-1.5"> |
| 29 | + <div className="mr-3 flex-shrink-0 self-start pt-0.5"> |
34 | 30 | <ChatBubbleLeftIcon className="text-lightgray h-5 w-5" />
|
35 | 31 | </div>
|
36 |
| - <div |
37 |
| - onClick={() => onClick(command)} |
38 |
| - className="flex flex-1 flex-col hover:cursor-pointer" |
39 |
| - > |
40 |
| - <div className="font-medium">{command.name}</div> |
41 |
| - <div className="text-lightgray text-sm">{command.description}</div> |
42 |
| - </div> |
43 |
| - <div className="flex items-center"> |
44 |
| - <GhostButton |
45 |
| - onClick={(e) => { |
46 |
| - e.stopPropagation(); |
47 |
| - onBookmark(command); |
48 |
| - }} |
49 |
| - aria-label={ |
50 |
| - isBookmarked ? "Remove bookmarked prompt" : "Bookmark prompt" |
51 |
| - } |
52 |
| - className={isHovered || isBookmarked ? "opacity-100" : "opacity-0"} |
53 |
| - > |
54 |
| - {isBookmarked ? ( |
55 |
| - <BookmarkIconSolid className="h-4 w-4" /> |
56 |
| - ) : ( |
57 |
| - <BookmarkIcon className="h-4 w-4" /> |
58 |
| - )} |
59 |
| - </GhostButton> |
| 32 | + <div className="flex flex-1 flex-col"> |
| 33 | + <div className="text-xs font-medium">{command.name}</div> |
| 34 | + <div className="text-lightgray text-xs">{command.description}</div> |
60 | 35 | </div>
|
61 | 36 | </div>
|
62 | 37 | </div>
|
|
0 commit comments