86 lines
2.6 KiB
TypeScript
86 lines
2.6 KiB
TypeScript
"use client";
|
|
import React from "react";
|
|
import { Card, CardContent } from "@/components/ui/card";
|
|
import { LanguageTranslation } from "@/components/validations/translations/translation";
|
|
import { ApplicationData } from "./types";
|
|
|
|
interface DataDisplayComponentProps {
|
|
data: ApplicationData[];
|
|
loading: boolean;
|
|
error: Error | null;
|
|
onUpdateClick: (item: ApplicationData) => void;
|
|
translations: Record<string, LanguageTranslation>;
|
|
lang: string;
|
|
}
|
|
|
|
export const DataDisplayComponent: React.FC<DataDisplayComponentProps> = ({
|
|
data,
|
|
loading,
|
|
error,
|
|
onUpdateClick,
|
|
translations,
|
|
lang,
|
|
}) => {
|
|
if (loading) {
|
|
return (
|
|
<div className="w-full text-center py-8">Loading applications...</div>
|
|
);
|
|
}
|
|
|
|
if (error) {
|
|
return (
|
|
<div className="w-full text-center py-8 text-red-500">
|
|
Error loading applications: {error.message}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (data.length === 0) {
|
|
return <div className="w-full text-center py-8">No applications found</div>;
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-wrap -mx-2">
|
|
{data.map((app, index) => (
|
|
<div
|
|
key={index}
|
|
className="w-full sm:w-1/5 p-1"
|
|
onClick={() => onUpdateClick(app)}
|
|
>
|
|
<Card className="h-full hover:bg-accent/50 cursor-pointer transition-colors">
|
|
<CardContent className="p-3">
|
|
<div className="font-medium text-sm mb-1">{app.name}</div>
|
|
<div className="space-y-0.5 text-xs">
|
|
<div className="flex">
|
|
<span className="text-muted-foreground w-10">
|
|
{translations.code &&
|
|
translations.code[lang as keyof LanguageTranslation]}
|
|
:
|
|
</span>
|
|
<span className="truncate">{app.application_code}</span>
|
|
</div>
|
|
<div className="flex">
|
|
<span className="text-muted-foreground w-10">
|
|
{translations.url &&
|
|
translations.url[lang as keyof LanguageTranslation]}
|
|
:
|
|
</span>
|
|
<span className="truncate">{app.site_url}</span>
|
|
</div>
|
|
<div className="flex">
|
|
<span className="text-muted-foreground w-10">
|
|
{translations.type &&
|
|
translations.type[lang as keyof LanguageTranslation]}
|
|
:
|
|
</span>
|
|
<span className="truncate">{app.application_type}</span>
|
|
</div>
|
|
</div>
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
};
|