52 lines
1.6 KiB
TypeScript
52 lines
1.6 KiB
TypeScript
import { Component, For } from 'solid-js';
|
|
import { AppItem } from '@/types/app';
|
|
import AppCard from '../AppCard';
|
|
import { Skeleton } from "@/components/ui/skeleton";
|
|
|
|
interface AppListProps {
|
|
apps: AppItem[];
|
|
loading: boolean;
|
|
category?: string;
|
|
}
|
|
|
|
const AppList: Component<AppListProps> = (props) => {
|
|
return (
|
|
<div class="grid auto-rows-auto grid-cols-[repeat(auto-fit,minmax(200px,1fr))] gap-4 pb-6">
|
|
{props.loading ? (
|
|
<For each={Array(8).fill(0)}>
|
|
{() => (
|
|
<div class="p-4 rounded-lg border border-border/40 bg-card">
|
|
<div class="flex items-start gap-3">
|
|
<Skeleton width={48} height={48} radius={8} />
|
|
<div class="flex-1 min-w-0">
|
|
<div class="flex items-center justify-between gap-2">
|
|
<Skeleton height={20} width={96} />
|
|
<Skeleton height={16} width={48} />
|
|
</div>
|
|
<div class="mt-1">
|
|
<Skeleton height={16} width={100} class="mt-2" />
|
|
<Skeleton height={16} width={100} class="mt-2" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</For>
|
|
) : (
|
|
<For each={props.apps}>
|
|
{(app) => (
|
|
<AppCard
|
|
category={props.category || app.category || ''}
|
|
pkgname={app.pkgname}
|
|
name={app.name}
|
|
description={app.more}
|
|
icon={app.icon}
|
|
/>
|
|
)}
|
|
</For>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AppList; |