mirror of
https://github.com/fosrl/pangolin.git
synced 2026-07-09 15:39:47 +02:00
69 lines
2.2 KiB
TypeScript
69 lines
2.2 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@app/lib/cn";
|
|
import type { LauncherResource } from "@server/routers/launcher/types";
|
|
import { LauncherLabelsRow } from "./LauncherLabelsRow";
|
|
import { LauncherResourceAccess } from "./LauncherResourceAccess";
|
|
import { LauncherResourceIcon } from "./LauncherResourceIcon";
|
|
import { getLauncherResourceSelectProps } from "./useLauncherResourceAction";
|
|
|
|
type LauncherResourceRowProps = {
|
|
resource: LauncherResource;
|
|
showLabels: boolean;
|
|
isLast?: boolean;
|
|
onSelect?: () => void;
|
|
};
|
|
|
|
export function LauncherResourceRow({
|
|
resource,
|
|
showLabels,
|
|
isLast = false,
|
|
onSelect
|
|
}: LauncherResourceRowProps) {
|
|
const hasTags = showLabels && resource.labels.length > 0;
|
|
const clickProps = onSelect
|
|
? getLauncherResourceSelectProps(onSelect)
|
|
: null;
|
|
|
|
return (
|
|
<div
|
|
className={cn(
|
|
"flex items-center gap-2.5 p-4 max-md:min-w-max max-md:whitespace-nowrap",
|
|
isLast ? undefined : "border-b border-border",
|
|
clickProps?.className
|
|
)}
|
|
onClick={clickProps?.onClick}
|
|
onKeyDown={clickProps?.onKeyDown}
|
|
role={clickProps?.role}
|
|
tabIndex={clickProps?.tabIndex}
|
|
>
|
|
<LauncherResourceIcon
|
|
iconUrl={resource.iconUrl}
|
|
name={resource.name}
|
|
variant="list"
|
|
/>
|
|
|
|
<span className="shrink-0 text-sm font-semibold text-foreground">
|
|
{resource.name}
|
|
</span>
|
|
|
|
<LauncherResourceAccess
|
|
accessDisplay={resource.accessDisplay}
|
|
accessCopyValue={resource.accessCopyValue}
|
|
accessUrl={resource.accessUrl}
|
|
variant="list"
|
|
/>
|
|
|
|
{hasTags ? (
|
|
<div className="flex min-w-0 max-w-md shrink items-center justify-end gap-1 max-md:shrink-0 max-md:max-w-none md:ml-auto">
|
|
<LauncherLabelsRow
|
|
labels={resource.labels}
|
|
variant="single-row"
|
|
className="w-auto shrink-0 justify-end"
|
|
/>
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
);
|
|
}
|