134 lines
5.6 KiB
Plaintext
134 lines
5.6 KiB
Plaintext
---
|
|
export interface Props {
|
|
tool: {
|
|
name: string;
|
|
icon?: string;
|
|
type?: string;
|
|
description: string;
|
|
domains: string[];
|
|
phases: string[];
|
|
platforms: string[];
|
|
skillLevel: string;
|
|
accessType: string;
|
|
url: string;
|
|
projectUrl?: string;
|
|
license: string;
|
|
tags: string[];
|
|
statusUrl?: string;
|
|
knowledgebase?: boolean;
|
|
};
|
|
}
|
|
|
|
const { tool } = Astro.props;
|
|
|
|
|
|
// Check types
|
|
const isMethod = tool.type === 'method';
|
|
const isConcept = tool.type === 'concept';
|
|
|
|
// Check if tool has a valid project URL (means we're hosting it)
|
|
const hasValidProjectUrl = tool.projectUrl !== undefined &&
|
|
tool.projectUrl !== null &&
|
|
tool.projectUrl !== "" &&
|
|
tool.projectUrl.trim() !== "";
|
|
|
|
// Check if tool has knowledgebase entry
|
|
const hasKnowledgebase = tool.knowledgebase === true;
|
|
|
|
// Determine card styling based on type and hosting status
|
|
const cardClass = isConcept ? 'card card-concept tool-card' :
|
|
isMethod ? 'card card-method tool-card' :
|
|
hasValidProjectUrl ? 'card card-hosted tool-card' :
|
|
(tool.license !== 'Proprietary' ? 'card card-oss tool-card' : 'card tool-card');
|
|
---
|
|
|
|
<div class={cardClass} onclick={`window.showToolDetails('${tool.name}')`} style="cursor: pointer; border-left: 4px solid {isMethod ? 'var(--color-method)' : hasValidProjectUrl ? 'var(--color-hosted)' : tool.license !== 'Proprietary' ? 'var(--color-oss)' : 'var(--color-border)'};">
|
|
<!-- Card Header with Fixed Height -->
|
|
<div class="tool-card-header">
|
|
<h3>
|
|
{tool.icon && <span style="margin-right: 0.5rem; font-size: 1.125rem;">{tool.icon}</span>}
|
|
{tool.name}
|
|
</h3>
|
|
<div class="tool-card-badges">
|
|
<!-- Only show CC24-Server and Knowledgebase badges -->
|
|
{!isMethod && hasValidProjectUrl && <span class="badge badge-primary">CC24-Server</span>}
|
|
{hasKnowledgebase && <span class="badge badge-error">📖</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Description - Truncated to 2 lines -->
|
|
<p class="text-muted">
|
|
{tool.description}
|
|
</p>
|
|
|
|
<!-- Metadata - Compact Icons with Better Alignment -->
|
|
<div class="tool-card-metadata" style="display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; line-height: 1;">
|
|
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
|
|
<rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
|
|
<line x1="9" y1="9" x2="15" y2="9"></line>
|
|
<line x1="9" y1="15" x2="15" y2="15"></line>
|
|
</svg>
|
|
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
|
|
{tool.platforms.slice(0, 2).join(', ')}{tool.platforms.length > 2 ? '...' : ''}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M12 6v6l4 2"></path>
|
|
</svg>
|
|
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
|
|
{tool.skillLevel}
|
|
</span>
|
|
</div>
|
|
|
|
<div class="metadata-item" style="display: flex; align-items: center; gap: 0.5rem; font-size: 0.75rem; color: var(--color-text-secondary); flex-shrink: 1; min-width: 0;">
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="flex-shrink: 0;">
|
|
<path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path>
|
|
<polyline points="14 2 14 8 20 8"></polyline>
|
|
</svg>
|
|
<span style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;">
|
|
{isMethod ? 'Methode' : tool.license === 'Proprietary' ? 'Prop.' : tool.license?.split(' ')[0]}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Tags - Two Lines with Fade -->
|
|
<div class="tool-tags-container">
|
|
{tool.tags.slice(0, 8).map(tag => (
|
|
<span class="tag">{tag}</span>
|
|
))}
|
|
</div>
|
|
|
|
<!-- Buttons - Fixed at Bottom -->
|
|
<div class="tool-card-buttons" onclick="event.stopPropagation();">
|
|
{isConcept ? (
|
|
<!-- Concept button -->
|
|
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-concept); border-color: var(--color-concept);">
|
|
Mehr erfahren
|
|
</a>
|
|
) : isMethod ? (
|
|
<!-- Method button -->
|
|
<a href={tool.projectUrl || tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button" style="background-color: var(--color-method); border-color: var(--color-method);">
|
|
Zur Methode
|
|
</a>
|
|
) : hasValidProjectUrl ? (
|
|
<!-- Two buttons for hosted tools -->
|
|
<div class="button-row">
|
|
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-secondary">
|
|
Homepage
|
|
</a>
|
|
<a href={tool.projectUrl} target="_blank" rel="noopener noreferrer" class="btn btn-primary">
|
|
Zugreifen
|
|
</a>
|
|
</div>
|
|
) : (
|
|
<!-- Single button for external tools -->
|
|
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary single-button">
|
|
Software-Homepage
|
|
</a>
|
|
)}
|
|
</div>
|
|
</div> |