197 lines
4.2 KiB
Plaintext
197 lines
4.2 KiB
Plaintext
---
|
|
/**
|
|
* ServiceCard component displays a service with an icon and name
|
|
* @component
|
|
* @example
|
|
* ```astro
|
|
* <ServiceCard
|
|
* name="Gitea"
|
|
* href="https://code.justin.deal"
|
|
* img="https://cdn.jsdelivr.net/gh/selfhst/icons/svg/gitea.svg"
|
|
* alt="Gitea"
|
|
* />
|
|
* ```
|
|
*/
|
|
interface Props {
|
|
/**
|
|
* The name of the service to display
|
|
*/
|
|
name: string;
|
|
|
|
/**
|
|
* The URL to link to when the service card is clicked
|
|
*/
|
|
href: string;
|
|
|
|
/**
|
|
* The URL of the service icon
|
|
*/
|
|
img: string;
|
|
|
|
/**
|
|
* Alternative text for the service icon
|
|
*/
|
|
alt: string;
|
|
}
|
|
|
|
const { name, href, img, alt } = Astro.props;
|
|
---
|
|
|
|
<a
|
|
href={href}
|
|
class="service-card zag-interactive flex items-center transition-all duration-300"
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<div class="service-icon-container flex-shrink-0">
|
|
<img
|
|
src={img}
|
|
alt={alt}
|
|
class="service-icon w-16 h-16 transition-all duration-300"
|
|
loading="lazy"
|
|
decoding="async"
|
|
/>
|
|
</div>
|
|
<p class="service-name mt-2 text-center transition-all duration-300">{name}</p>
|
|
</a>
|
|
|
|
<style>
|
|
/* Default (grid) view */
|
|
.service-card {
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
/* List view adjustments applied via JS */
|
|
:global(.view-mode-list) .service-card {
|
|
flex-direction: row;
|
|
justify-content: flex-start;
|
|
padding: 0.5rem;
|
|
border-radius: 0.375rem;
|
|
}
|
|
|
|
:global(.view-mode-list) .service-name {
|
|
margin-top: 0;
|
|
margin-left: 1rem;
|
|
text-align: left;
|
|
}
|
|
|
|
/* Display mode styles */
|
|
/* Default display mode (both) */
|
|
.service-icon-container, .service-name {
|
|
display: block;
|
|
}
|
|
|
|
/* Image only mode */
|
|
:global(.display-image-only) .service-name {
|
|
display: none;
|
|
}
|
|
|
|
:global(.display-image-only) .service-icon-container {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
/* Name only mode */
|
|
:global(.display-name-only) .service-icon-container {
|
|
display: none;
|
|
}
|
|
|
|
:global(.display-name-only) .service-name {
|
|
display: block;
|
|
margin-top: 0;
|
|
font-size: 1.1rem;
|
|
}
|
|
|
|
/* Adjust list view for different display modes */
|
|
:global(.view-mode-list.display-name-only) .service-card {
|
|
padding: 0.75rem 1rem;
|
|
}
|
|
|
|
:global(.view-mode-list.display-image-only) .service-card {
|
|
justify-content: center;
|
|
padding: 0.5rem;
|
|
}
|
|
|
|
/* Icon size adjustments with CSS variables for fine-grained control */
|
|
:global(#app-list) {
|
|
--icon-scale: 2; /* Default medium size */
|
|
--icon-base-size: 1rem;
|
|
}
|
|
|
|
.service-icon {
|
|
width: calc(var(--icon-base-size) * var(--icon-scale) * 2);
|
|
height: calc(var(--icon-base-size) * var(--icon-scale) * 2);
|
|
}
|
|
|
|
/* Fallback discrete sizes for browsers that don't support calc */
|
|
:global(.icon-size-small) .service-icon {
|
|
width: 2rem;
|
|
height: 2rem;
|
|
}
|
|
|
|
:global(.icon-size-medium) .service-icon {
|
|
width: 4rem;
|
|
height: 4rem;
|
|
}
|
|
|
|
:global(.icon-size-large) .service-icon {
|
|
width: 6rem;
|
|
height: 6rem;
|
|
}
|
|
|
|
/* Enhanced hover effects */
|
|
.service-card {
|
|
transition: all 0.3s ease;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
border: 2px solid transparent;
|
|
background-color: var(--color-zag-bg);
|
|
border-radius: 0.5rem;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
.service-card::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(135deg, transparent 0%, var(--color-zag-accent) 300%);
|
|
opacity: 0;
|
|
transition: opacity 0.3s ease;
|
|
z-index: -1;
|
|
}
|
|
|
|
.service-card:hover {
|
|
transform: translateY(-4px);
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
border-color: var(--color-zag-accent);
|
|
background-color: var(--color-zag-bg-hover);
|
|
z-index: 10;
|
|
}
|
|
|
|
.service-card:hover::before {
|
|
opacity: 0.1;
|
|
}
|
|
|
|
.service-card:hover .service-icon {
|
|
transform: scale(1.1);
|
|
}
|
|
|
|
:global(.view-mode-list) .service-card:hover {
|
|
transform: translateX(4px);
|
|
}
|
|
|
|
/* Dark mode adjustments */
|
|
:global(.dark) .service-card {
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
:global(.dark) .service-card:hover {
|
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
|
|
}
|
|
</style>
|