Skip to content

Commit

Permalink
add versions tab
Browse files Browse the repository at this point in the history
  • Loading branch information
@lars-berger
lars-berger committed Feb 11, 2025
1 parent 72e1a0f commit 4f7434d
Show file tree
Hide file tree
Showing 4 changed files with 149 additions and 76 deletions.
40 changes: 40 additions & 0 deletions packages/settings-ui/src/common/desktop/CommunityPacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,26 @@ const communityPacksMock = [
{ id: 'memory-usage', name: 'Memory Usage' },
{ id: 'disk-space', name: 'Disk Space' },
],
versions: [
{
versionNumber: '2.1.0',
publishDate: new Date('2024-01-15'),
commitHash: '8f62a3d',
releaseNotes: 'Added dark mode support and new KPI cards',
},
{
versionNumber: '2.0.1',
publishDate: new Date('2023-12-20'),
commitHash: '3e7b9c2',
releaseNotes: 'Fixed responsive layout issues',
},
{
versionNumber: '2.0.0',
publishDate: new Date('2023-12-01'),
commitHash: '1a2b3c4',
releaseNotes: 'Major redesign and performance improvements',
},
],
},
{
id: 'weather-widgets',
Expand All @@ -47,6 +67,26 @@ const communityPacksMock = [
{ id: 'current-weather', name: 'Current Weather' },
{ id: 'forecast', name: 'Weekly Forecast' },
],
versions: [
{
versionNumber: '2.1.0',
publishDate: new Date('2024-01-15'),
commitHash: '8f62a3d',
releaseNotes: 'Added dark mode support and new KPI cards',
},
{
versionNumber: '2.0.1',
publishDate: new Date('2023-12-20'),
commitHash: '3e7b9c2',
releaseNotes: 'Fixed responsive layout issues',
},
{
versionNumber: '2.0.0',
publishDate: new Date('2023-12-01'),
commitHash: '1a2b3c4',
releaseNotes: 'Major redesign and performance improvements',
},
],
},
];

Expand Down
8 changes: 8 additions & 0 deletions packages/settings-ui/src/common/desktop/UserPacksContext.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,13 +52,21 @@ export type WidgetPack = {
name: string;
author: string;
galleryUrls?: string[];
versions?: WidgetPackVersion[];
description: string;
version: string;
widgets: { id: string; name: string }[];
license: string;
tags: string[];
};

export type WidgetPackVersion = {
versionNumber: string;
releaseNotes: string;
commitHash: string;
publishDate: Date;
};

export type CreateWidgetPackForm = {
name: string;
};
Expand Down
2 changes: 1 addition & 1 deletion packages/settings-ui/src/common/layout/AppLayout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ export function AppLayout(props: AppLayoutProps & RouteSectionProps) {

<ResizableHandle withHandle />

<ResizablePanel initialSize={sizes()[1]}>
<ResizablePanel initialSize={sizes()[1]} class="overflow-auto">
{props.children}
</ResizablePanel>
</Resizable>
Expand Down
175 changes: 100 additions & 75 deletions packages/settings-ui/src/community/CommunityPack.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,30 +49,59 @@ export function CommunityPack() {
}

return (
<div class="container mx-auto py-6">
<div class="container mx-auto pt-6 pb-40">
<Show when={communityPacks.selectedPack()}>
{selectedPack => (
<div class="space-y-8">
{/* Header */}
<div class="flex items-center gap-2">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/community">
Marketplace
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>{selectedPack().name}</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>
<div class="space-y-3">
<div class="flex items-center gap-2">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="/community">
Browse Community
</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbPage>
{selectedPack().name}
</BreadcrumbPage>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
</div>

<h1 class="text-3xl font-bold tracking-tight">
{selectedPack().name}
</h1>
<div class="flex items-center gap-4">
<h1 class="text-3xl font-bold tracking-tight">
{selectedPack().name}
</h1>

<Badge variant="secondary" class="h-6">
v{selectedPack().version}
</Badge>
</div>

<div class="flex items-center gap-4 text-sm text-muted-foreground">
<div class="flex items-center gap-2">
<img
src="https://placehold.co/200x200"
alt={selectedPack().author}
width={24}
height={24}
class="rounded-full"
/>
<span>by {selectedPack().author}</span>
</div>
<span>
Published{' '}
{new Date(
selectedPack().versions?.[0].publishDate,
).toLocaleDateString()}
</span>
</div>
</div>

{/* Gallery */}
<div class="relative aspect-[2/1] w-full overflow-hidden rounded-lg bg-muted">
Expand All @@ -82,21 +111,21 @@ export function CommunityPack() {
'/placeholder.svg'
}
alt={`${selectedPack().name} preview ${currentImageIndex() + 1}`}
class="object-cover"
class="absolute left-1/2 top-1/2 h-full w-full -translate-x-1/2 -translate-y-1/2 object-contain"
/>
<div class="absolute inset-0 flex items-center justify-between p-4">
<Button
variant="outline"
size="icon"
onClick={previousImage}
onClick={() => previousImage(selectedPack())}
class="h-8 w-8 bg-background/50 backdrop-blur-sm"
>
<IconChevronLeft class="h-4 w-4" />
</Button>
<Button
variant="outline"
size="icon"
onClick={nextImage}
onClick={() => nextImage(selectedPack())}
class="h-8 w-8 bg-background/50 backdrop-blur-sm"
>
<IconChevronRight class="h-4 w-4" />
Expand All @@ -114,73 +143,39 @@ export function CommunityPack() {

{/* Header */}
<div class="flex items-start justify-between">
<div class="space-y-2">
<h1 class="text-3xl font-bold tracking-tight">
{selectedPack().name}
</h1>
<div class="flex items-center gap-4">
<div class="flex items-center gap-2">
<img
src="/placeholder.svg"
alt={selectedPack().author}
width={24}
height={24}
class="rounded-full"
/>
<span class="text-sm text-muted-foreground">
by {selectedPack().author}
</span>
</div>
<Separator orientation="vertical" class="h-4" />
{/* <div class="flex items-center gap-4 text-sm text-muted-foreground">
<span class="flex items-center gap-1">
<IconDownload class="h-4 w-4" />
{selectedPack().downloads.toLocaleString()}
</span>
<span class="flex items-center gap-1">
<IconUsers class="h-4 w-4" />
{selectedPack().views.toLocaleString()}
</span>
<span class="flex items-center gap-1">
<IconHeart class="h-4 w-4" />
{selectedPack().likes.toLocaleString()}
</span>
<span class="flex items-center gap-1">
<IconClock class="h-4 w-4" />
Last updated{' '}
{new Date(
selectedPack().lastUpdated,
).toLocaleDateString()}
</span>
</div> */}
</div>
</div>
<div class="flex items-center gap-2">
<Button variant="outline" size="icon">
<IconShare2 class="h-4 w-4" />
</Button>
<Button variant="outline" size="icon">
<IconHeart class="h-4 w-4" />
</Button>
<Button variant="outline">
<Button
variant="outline"
onClick={() =>
communityPacks.startPreview(selectedPack())
}
>
<IconEye class="mr-2 h-4 w-4" />
Preview
</Button>
<Button>
<Button
onClick={() => communityPacks.install(selectedPack())}
>
<IconDownload class="mr-2 h-4 w-4" />
Install
</Button>
</div>
</div>

{/* Content */}
<Tabs defaultValue="about" class="space-y-6">
<Tabs defaultValue="readme" class="space-y-6">
<TabsList>
<TabsTrigger value="about">About</TabsTrigger>
<TabsTrigger value="widgets">Included Widgets</TabsTrigger>
<TabsTrigger value="readme">Readme</TabsTrigger>
<TabsTrigger value="widgets">Included widgets</TabsTrigger>
<TabsTrigger value="versions">
Versions
<Badge class="ml-1" variant="secondary">
{selectedPack().versions.length}
</Badge>
</TabsTrigger>
</TabsList>

<TabsContent value="about" class="space-y-6">
<TabsContent value="readme" class="space-y-6">
<div class="prose prose-sm dark:prose-invert max-w-none">
<div class="whitespace-pre-line">
{selectedPack().description}
Expand All @@ -206,6 +201,36 @@ export function CommunityPack() {
))}
</div>
</TabsContent>

<TabsContent value="versions" class="space-y-6">
<div class="space-y-4">
{selectedPack().versions.map(version => (
<div class="flex items-start justify-between border-b pb-4">
<div class="space-y-1">
<div class="flex items-center gap-2">
<h3 class="font-medium">
v{version.versionNumber}
</h3>
<span class="text-sm text-muted-foreground">
•{' '}
{new Date(
version.publishDate,
).toLocaleDateString()}
</span>
</div>
<p class="text-sm text-muted-foreground">
{version.releaseNotes}
</p>
</div>
<div class="text-sm text-muted-foreground">
<code class="px-2 py-1 rounded-md bg-muted">
{version.commitHash}
</code>
</div>
</div>
))}
</div>
</TabsContent>
</Tabs>
</div>
)}
Expand Down

0 comments on commit 4f7434d

Please sign in to comment.