80 lines
2.7 KiB
Plaintext
80 lines
2.7 KiB
Plaintext
---
|
|
export interface Props {
|
|
tool: {
|
|
name: string;
|
|
description: string;
|
|
domains: string[];
|
|
phases: string[];
|
|
platforms: string[];
|
|
skillLevel: string;
|
|
accessType: string;
|
|
url: string;
|
|
license: string;
|
|
tags: string[];
|
|
isHosted: boolean;
|
|
statusUrl?: string;
|
|
};
|
|
}
|
|
|
|
const { tool } = Astro.props;
|
|
|
|
// Determine card styling
|
|
const cardClass = tool.isHosted ? 'card card-hosted' : (tool.license !== 'Proprietary' ? 'card card-oss' : 'card');
|
|
---
|
|
|
|
<div class={cardClass}>
|
|
<div style="display: flex; justify-content: space-between; align-items: start; margin-bottom: 0.75rem;">
|
|
<h3 style="margin: 0;">{tool.name}</h3>
|
|
<div style="display: flex; gap: 0.5rem;">
|
|
{tool.isHosted && <span class="badge badge-primary">Self-Hosted</span>}
|
|
{tool.license !== 'Proprietary' && <span class="badge badge-success">Open Source</span>}
|
|
</div>
|
|
</div>
|
|
|
|
<p class="text-muted" style="font-size: 0.875rem; margin-bottom: 1rem;">
|
|
{tool.description}
|
|
</p>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem;">
|
|
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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 class="text-muted" style="font-size: 0.75rem;">
|
|
{tool.platforms.join(', ')}
|
|
</span>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<circle cx="12" cy="12" r="10"></circle>
|
|
<path d="M12 6v6l4 2"></path>
|
|
</svg>
|
|
<span class="text-muted" style="font-size: 0.75rem;">
|
|
{tool.skillLevel}
|
|
</span>
|
|
</div>
|
|
|
|
<div style="display: flex; align-items: center; gap: 0.25rem;">
|
|
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
|
<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 class="text-muted" style="font-size: 0.75rem;">
|
|
{tool.license}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div style="display: flex; flex-wrap: wrap; gap: 0.25rem; margin-bottom: 1rem;">
|
|
{tool.tags.map(tag => (
|
|
<span class="tag">{tag}</span>
|
|
))}
|
|
</div>
|
|
|
|
<a href={tool.url} target="_blank" rel="noopener noreferrer" class="btn btn-primary" style="width: 100%;">
|
|
{tool.isHosted ? 'Access Service' : 'Visit Website'}
|
|
</a>
|
|
</div> |