Alex Newman
700e3253fa
- Updated card styles in viewer.html and viewer-template.html to enhance padding, margins, and overall layout. - Introduced new header structure with left-aligned type and project name, and added view mode toggle buttons for facts and narrative. - Simplified content rendering logic in ObservationCard, allowing for toggling between facts and narrative. - Updated metadata display in ObservationCard, PromptCard, and SummaryCard to include formatted date and improved layout. - Removed unnecessary verbose content sections and streamlined the presentation of facts and narrative.
29 lines
766 B
TypeScript
29 lines
766 B
TypeScript
import React from 'react';
|
|
import { UserPrompt } from '../types';
|
|
import { formatDate } from '../utils/formatters';
|
|
|
|
interface PromptCardProps {
|
|
prompt: UserPrompt;
|
|
}
|
|
|
|
export function PromptCard({ prompt }: PromptCardProps) {
|
|
const date = formatDate(prompt.created_at_epoch);
|
|
|
|
return (
|
|
<div className="card prompt-card">
|
|
<div className="card-header">
|
|
<div className="card-header-left">
|
|
<span className="card-type">Prompt</span>
|
|
<span className="card-project">{prompt.project}</span>
|
|
</div>
|
|
</div>
|
|
<div className="card-content">
|
|
{prompt.prompt_text}
|
|
</div>
|
|
<div className="card-meta">
|
|
<span className="meta-date">#{prompt.id} • {date}</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|