60 lines
1.7 KiB
Plaintext
60 lines
1.7 KiB
Plaintext
---
|
||
const {
|
||
slug,
|
||
title,
|
||
type,
|
||
description,
|
||
tags = [],
|
||
created_at,
|
||
updated_at,
|
||
notes,
|
||
} = Astro.props;
|
||
|
||
const formatDate = (dateStr: string | undefined) => {
|
||
if (!dateStr) return "–";
|
||
const date = new Date(dateStr);
|
||
return isNaN(date.getTime())
|
||
? "Invalid date"
|
||
: date.toLocaleDateString('en-US', {
|
||
month: 'short',
|
||
day: 'numeric',
|
||
year: 'numeric',
|
||
});
|
||
};
|
||
---
|
||
|
||
<div class="border border-gray-400 rounded p-4 bg-gray-700 text-gray-200 shadow-sm flex flex-col gap-2 min-h-[12rem]">
|
||
<div class="flex items-center justify-between">
|
||
<h3 class="text-xl font-semibold">{title}</h3>
|
||
<span class={`text-sm font-medium px-2 py-1 rounded ${
|
||
type === 'System' ? 'bg-blue-100 text-blue-700' : 'bg-green-100 text-green-700'
|
||
}`}>
|
||
{type}
|
||
</span>
|
||
</div>
|
||
|
||
<p class="text-md">{notes}</p>
|
||
|
||
<div class="flex flex-wrap gap-2 mt-2">
|
||
{tags.map((tag: string) => (
|
||
<span class="text-sm bg-gray-200 text-gray-800 px-2 py-1 pt-0 rounded">{tag}</span>
|
||
))}
|
||
</div>
|
||
|
||
<details name="prompt-details">
|
||
<summary class="cursor-pointer font-semibold mt-2 text-lg">View Details</summary>
|
||
<div class="text-md border-t mt-2 pt-2">
|
||
<div class="flex justify-between items-center">
|
||
<h3 class="text-xl font-semibold px-2">Prompt</h3>
|
||
|
||
<a class="bg-green-600 text-white px-2 py-0 rounded text-sm hover:bg-green-700 transition-colors duration-300" href={`/edit?slug=${slug}`}>Edit</a>
|
||
</div>
|
||
|
||
<p class="my-2 px-2 text-balance" set:html={description.replace(/\n/g, '<br />')} />
|
||
|
||
<hr class="my-2" />
|
||
<p class="text-sm"><strong>Created:</strong> {formatDate(created_at)} • <strong>Updated:</strong> {formatDate(updated_at)}</p>
|
||
</div>
|
||
</details>
|
||
</div>
|