66 lines
1.5 KiB
Plaintext
66 lines
1.5 KiB
Plaintext
---
|
|
import { createToolSlug } from '../utils/toolHelpers.js';
|
|
|
|
export interface Props {
|
|
toolName: string;
|
|
context: 'card' | 'modal-primary' | 'modal-secondary';
|
|
size?: 'small' | 'medium';
|
|
}
|
|
|
|
const { toolName, context, size = 'small' } = Astro.props;
|
|
|
|
// AFTER: Single line with centralized function
|
|
const toolSlug = createToolSlug(toolName);
|
|
|
|
const iconSize = size === 'small' ? '14' : '16';
|
|
---
|
|
|
|
<button
|
|
class={`share-btn share-btn--${size}`}
|
|
data-tool-name={toolName}
|
|
data-tool-slug={toolSlug}
|
|
data-context={context}
|
|
onclick="event.stopPropagation(); window.showShareDialog(this)"
|
|
title={`${toolName} teilen`}
|
|
aria-label={`${toolName} teilen`}
|
|
>
|
|
<svg width={iconSize} height={iconSize} viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="18" cy="5" r="3"/>
|
|
<circle cx="6" cy="12" r="3"/>
|
|
<circle cx="18" cy="19" r="3"/>
|
|
<line x1="8.59" y1="13.51" x2="15.42" y2="17.49"/>
|
|
<line x1="15.41" y1="6.51" x2="8.59" y2="10.49"/>
|
|
</svg>
|
|
</button>
|
|
|
|
<style>
|
|
.share-btn {
|
|
background: none;
|
|
border: none;
|
|
color: var(--color-text-secondary);
|
|
cursor: pointer;
|
|
padding: 0.25rem;
|
|
border-radius: 0.25rem;
|
|
transition: var(--transition-fast);
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.share-btn:hover {
|
|
color: var(--color-primary);
|
|
background-color: var(--color-bg-secondary);
|
|
}
|
|
|
|
.share-btn--small {
|
|
padding: 0.125rem;
|
|
}
|
|
|
|
.share-btn--medium {
|
|
padding: 0.375rem;
|
|
}
|
|
|
|
.share-btn svg {
|
|
flex-shrink: 0;
|
|
}
|
|
</style> |