Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 | 1x 1x 1x 1x 1x 1x 1x 1x 1x | import { VSCodeButton } from "@vscode/webview-ui-toolkit/react"
import React from "react"
import styled from "styled-components"
interface QuoteButtonProps {
top: number
left: number
onClick: () => void
}
// Define props specifically for the styled component using transient props
interface ButtonContainerProps {
$top: number
$left: number
}
const ButtonContainer = styled.div<ButtonContainerProps>`
position: absolute;
top: ${(props) => props.$top}px; // Use transient prop $top
left: ${(props) => props.$left}px; // Use transient prop $left
z-index: 10; // Ensure it's above the text
background-color: var(--vscode-button-background);
border: 1px solid var(--vscode-button-border);
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
transition: transform 0.1s ease;
&:hover {
transform: scale(1.05);
background-color: var(--vscode-button-hoverBackground);
}
`
const QuoteButton: React.FC<QuoteButtonProps> = ({ top, left, onClick }) => {
return (
// Pass transient props to the styled component
<ButtonContainer $left={left} $top={top} className="quote-button-class">
<VSCodeButton
appearance="icon"
aria-label="Quote selection"
onClick={(e) => {
e.stopPropagation() // Prevent triggering mouseup on the parent
onClick()
}}
style={{ padding: "2px 4px", height: "auto", minWidth: "auto" }}
title="Quote selection in reply">
{" "}
{/* Adjust padding */}
<span
className="codicon codicon-quote"
style={{ fontSize: "12px", color: "var(--vscode-button-foreground)" }}></span>{" "}
{/* Adjust font size */}
</VSCodeButton>
</ButtonContainer>
)
}
export default QuoteButton
|