119 lines
3.4 KiB
Plaintext
119 lines
3.4 KiB
Plaintext
---
|
|
interface Props {
|
|
tag: string;
|
|
index: number;
|
|
className?: string;
|
|
}
|
|
|
|
const { tag, index, className = '' } = Astro.props;
|
|
|
|
// Color mapping based on tag content for variety
|
|
const getColorClass = (tag: string) => {
|
|
const tagLower = tag.toLowerCase();
|
|
if (tagLower.includes('meta') || tagLower.includes('learning')) return 'highlighter-yellow';
|
|
if (tagLower.includes('debug') || tagLower.includes('tools')) return 'highlighter-pink';
|
|
if (tagLower.includes('ai') || tagLower.includes('automation')) return 'highlighter-blue';
|
|
if (tagLower.includes('script') || tagLower.includes('code')) return 'highlighter-green';
|
|
return 'highlighter-yellow'; // default
|
|
};
|
|
|
|
const colorClass = getColorClass(tag);
|
|
---
|
|
|
|
<span class={`highlighter-tag ${colorClass} ${className} inline-block text-xs font-bold px-2.5 py-1 rounded cursor-pointer transition-all duration-200 relative overflow-hidden group`} data-tag={tag}>
|
|
<span class="relative z-10">{tag}</span>
|
|
</span>
|
|
|
|
<style>
|
|
/* Enhanced hover effects */
|
|
.highlighter-tag {
|
|
transform: rotate(-1deg) translateY(0);
|
|
box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.highlighter-tag:hover {
|
|
transform: rotate(-2deg) translateY(-2px) scale(1.05);
|
|
box-shadow: 3px 3px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
|
|
/* Staggered entrance animation */
|
|
@keyframes tagPopIn {
|
|
from {
|
|
opacity: 0;
|
|
transform: rotate(-1deg) scale(0.8) translateY(5px);
|
|
}
|
|
to {
|
|
opacity: 1;
|
|
transform: rotate(-1deg) scale(1) translateY(0);
|
|
}
|
|
}
|
|
|
|
.highlighter-tag {
|
|
animation: tagPopIn 0.3s ease-out both;
|
|
animation-delay: calc(var(--tag-index, 0) * 0.05s);
|
|
}
|
|
|
|
/* Color variations with gradients */
|
|
.highlighter-yellow {
|
|
background: linear-gradient(135deg, rgba(255, 235, 59, 0.95) 0%, rgba(255, 213, 79, 0.95) 100%);
|
|
color: #3f2f00;
|
|
}
|
|
|
|
.highlighter-pink {
|
|
background: linear-gradient(135deg, rgba(255, 167, 209, 0.95) 0%, rgba(255, 122, 175, 0.95) 100%);
|
|
color: #3f0018;
|
|
}
|
|
|
|
.highlighter-green {
|
|
background: linear-gradient(135deg, rgba(129, 199, 132, 0.95) 0%, rgba(102, 187, 106, 0.95) 100%);
|
|
color: #002f0a;
|
|
}
|
|
|
|
.highlighter-blue {
|
|
background: linear-gradient(135deg, rgba(100, 181, 246, 0.95) 0%, rgba(66, 165, 245, 0.95) 100%);
|
|
color: #001f3f;
|
|
}
|
|
|
|
/* Hover glow effect */
|
|
.highlighter-tag:hover::before {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -2px;
|
|
background: inherit;
|
|
filter: blur(8px);
|
|
opacity: 0.4;
|
|
z-index: -1;
|
|
border-radius: inherit;
|
|
}
|
|
|
|
/* Click effect */
|
|
.highlighter-tag:active {
|
|
transform: rotate(-1deg) translateY(0) scale(0.98);
|
|
transition: transform 0.1s ease;
|
|
}
|
|
|
|
/* Focus effect for accessibility */
|
|
.highlighter-tag:focus {
|
|
outline: 2px solid #3b82f6;
|
|
outline-offset: 2px;
|
|
transform: rotate(-1deg) translateY(-2px) scale(1.05);
|
|
box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.3), 3px 3px 0 rgba(0, 0, 0, 0.15);
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
// Add click handler for tag filtering
|
|
if (typeof document !== 'undefined') {
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const tags = document.querySelectorAll('.highlighter-tag');
|
|
tags.forEach(tagElement => {
|
|
tagElement.addEventListener('click', (e) => {
|
|
const tag = tagElement.getAttribute('data-tag');
|
|
if (tag && typeof (window as any).filterByTag === 'function') {
|
|
(window as any).filterByTag(tag);
|
|
}
|
|
});
|
|
});
|
|
});
|
|
}
|
|
</script> |