64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import React from 'react'
|
|
import { Pencil } from 'lucide-react'
|
|
import type { PromptProfile } from '../types'
|
|
|
|
export interface ProfileListProps {
|
|
profiles: PromptProfile[]
|
|
selectedProfile: string | null
|
|
onSelect: (name: string) => void
|
|
}
|
|
|
|
export const ProfileList: React.FC<ProfileListProps> = ({ profiles, selectedProfile, onSelect }) => {
|
|
return (
|
|
<div className="grid grid-cols-3 gap-4">
|
|
{profiles.map((profile) => {
|
|
const isActive = profile.is_active
|
|
const isSelected = selectedProfile === profile.name
|
|
|
|
return (
|
|
<div
|
|
key={profile.name}
|
|
className={`bg-white rounded-lg border p-4 transition-all ${
|
|
isSelected
|
|
? 'border-blue-500 shadow-md ring-1 ring-blue-500'
|
|
: isActive
|
|
? 'border-blue-300 shadow-sm'
|
|
: 'border-gray-200 shadow-sm'
|
|
}`}
|
|
>
|
|
<div className="flex items-center justify-between mb-3">
|
|
<div className="flex items-center gap-2">
|
|
<span
|
|
className={`inline-block w-2.5 h-2.5 rounded-full ${
|
|
isActive ? 'bg-green-500' : 'bg-gray-300'
|
|
}`}
|
|
title={isActive ? 'Active' : 'Inactive'}
|
|
/>
|
|
<span className="font-semibold text-gray-900">Profile {profile.name}</span>
|
|
</div>
|
|
{isActive && (
|
|
<span className="text-xs font-medium text-green-700 bg-green-50 px-2 py-0.5 rounded-full">
|
|
Active
|
|
</span>
|
|
)}
|
|
</div>
|
|
|
|
<button
|
|
type="button"
|
|
onClick={() => onSelect(profile.name)}
|
|
className={`w-full flex items-center justify-center gap-2 px-3 py-2 rounded text-sm font-medium transition-all ${
|
|
isSelected
|
|
? 'bg-blue-600 text-white hover:bg-blue-700'
|
|
: 'bg-gray-100 text-gray-700 hover:bg-gray-200'
|
|
}`}
|
|
>
|
|
<Pencil className="w-3.5 h-3.5" />
|
|
{isSelected ? 'Editing' : 'Edit'}
|
|
</button>
|
|
</div>
|
|
)
|
|
})}
|
|
</div>
|
|
)
|
|
}
|