diff --git a/src/components/AiBadge/AiBadge.module.css b/src/components/AiBadge/AiBadge.module.css new file mode 100644 index 00000000000..7e23f513a49 --- /dev/null +++ b/src/components/AiBadge/AiBadge.module.css @@ -0,0 +1,21 @@ +.badge { + display: inline-flex; + align-items: center; + gap: 3px; + padding: 2px 5px; + background-color: var(--blue-600, #375bd2); + border-radius: 4px; + font-size: 10px; + font-weight: 700; + color: #fff; + letter-spacing: 0.4px; + line-height: 1; + flex-shrink: 0; + vertical-align: middle; + user-select: none; +} + +.sparkle { + flex-shrink: 0; + opacity: 0.9; +} diff --git a/src/components/AiBadge/AiBadge.tsx b/src/components/AiBadge/AiBadge.tsx new file mode 100644 index 00000000000..d91bd03fb50 --- /dev/null +++ b/src/components/AiBadge/AiBadge.tsx @@ -0,0 +1,29 @@ +import styles from "./AiBadge.module.css" + +interface AiBadgeProps { + className?: string +} + +export function AiBadge({ className }: AiBadgeProps) { + return ( + + + AI + + ) +} diff --git a/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css b/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css index 4e04dbfdb63..2057a94b3a6 100644 --- a/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css +++ b/src/components/RightSidebar/CopyPageLink/CopyPageLink.module.css @@ -9,7 +9,9 @@ } .label { - display: block; + display: flex; + align-items: center; + gap: 6px; font-size: 0.75rem; font-weight: 500; color: var(--gray-600, #4b5563); diff --git a/src/components/RightSidebar/CopyPageLink/CopyPageLink.tsx b/src/components/RightSidebar/CopyPageLink/CopyPageLink.tsx index b699145392c..07c679fcbb8 100644 --- a/src/components/RightSidebar/CopyPageLink/CopyPageLink.tsx +++ b/src/components/RightSidebar/CopyPageLink/CopyPageLink.tsx @@ -8,7 +8,7 @@ import { extractPageContent, copyToClipboard } from "./contentExtractor.js" import { MarkdownPreviewModal } from "./MarkdownPreviewModal.js" import type { CopyPageLinkProps, CopyAction } from "./types.js" import styles from "./CopyPageLink.module.css" - +import { AiBadge } from "../../AiBadge/AiBadge.js" export function CopyPageLink({ className }: CopyPageLinkProps) { const [isDropdownOpen, setIsDropdownOpen] = useState(false) const [isModalOpen, setIsModalOpen] = useState(false) @@ -169,7 +169,7 @@ Please ask me to paste it now. After I paste, please: <>