mark/vibn-frontend
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

VIBN Frontend for Coolify deployment

Browse Source
This commit is contained in:
Mark Henderson
2026-02-15 19:25:52 -08:00
commit 40bf8428cd
398 changed files with 76513 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

179
app/[workspace]/project/[projectId]/product/page.tsx Normal file
View File

@@ -0,0 +1,179 @@
"use client";
import { useParams, usePathname } from "next/navigation";
import {
Code2,
Globe,
Server,
MessageSquare,
ChevronRight,
} from "lucide-react";
import {
PageTemplate,
PageSection,
PageCard,
PageGrid,
} from "@/components/layout/page-template";
const PRODUCT_NAV_ITEMS = [
{ title: "Code", icon: Code2, href: "/code" },
{ title: "Website", icon: Globe, href: "/product#website" },
{ title: "Chat Agent", icon: MessageSquare, href: "/product#agent" },
{ title: "Deployment", icon: Server, href: "/product#deployment" },
];
export default function ProductPage() {
const params = useParams();
const pathname = usePathname();
const workspace = params.workspace as string;
const projectId = params.projectId as string;
const sidebarItems = PRODUCT_NAV_ITEMS.map((item) => {
const fullHref = `/${workspace}/project/${projectId}${item.href}`;
return {
...item,
href: fullHref,
isActive: pathname === fullHref || pathname.startsWith(fullHref),
};
});
return (
<PageTemplate
sidebar={{
items: sidebarItems,
}}
>
{/* Quick Navigation Cards */}
<PageSection>
<PageGrid cols={2}>
{PRODUCT_NAV_ITEMS.map((item) => {
const Icon = item.icon;
const fullHref = `/${workspace}/project/${projectId}${item.href}`;
return (
<a key={item.href} href={fullHref}>
<PageCard hover>
<div className="flex items-start gap-4">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center shrink-0">
<Icon className="h-5 w-5 text-muted-foreground" />
</div>
<div className="flex-1 min-w-0">
<h3 className="font-semibold mb-1">{item.title}</h3>
<p className="text-sm text-muted-foreground">
{item.title === "Code" &&
"Browse codebase, manage repositories"}
{item.title === "Website" &&
"Marketing site, landing pages"}
{item.title === "Chat Agent" &&
"Conversational AI interface"}
{item.title === "Deployment" &&
"Hosting, CI/CD, environments"}
</p>
</div>
<ChevronRight className="h-5 w-5 text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0" />
</div>
</PageCard>
</a>
);
})}
</PageGrid>
</PageSection>
{/* Code Section */}
<PageSection
title="Code"
description="Your application codebase"
>
<PageCard>
<div className="flex items-center justify-between">
<div className="flex items-center gap-3">
<div className="h-10 w-10 rounded-lg bg-muted flex items-center justify-center">
<Code2 className="h-5 w-5 text-muted-foreground" />
</div>
<div>
<p className="font-medium">Browse Repository</p>
<p className="text-sm text-muted-foreground">
View files, commits, and code structure
</p>
</div>
</div>
<a href={`/${workspace}/project/${projectId}/code`}>
<ChevronRight className="h-5 w-5 text-muted-foreground" />
</a>
</div>
</PageCard>
</PageSection>
{/* Website Section */}
<PageSection
title="Website"
description="Marketing site and landing pages"
>
<PageCard>
<div className="text-center py-8 text-muted-foreground">
<Globe className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">
Manage your marketing website and landing pages
</p>
</div>
</PageCard>
</PageSection>
{/* Chat Agent Section */}
<PageSection
title="Chat Agent"
description="Conversational AI interface"
>
<PageCard>
<div className="text-center py-8 text-muted-foreground">
<MessageSquare className="h-12 w-12 mx-auto mb-3 opacity-50" />
<p className="text-sm">
Configure and manage your AI chat agent
</p>
</div>
</PageCard>
</PageSection>
{/* Deployment Section */}
<PageSection
title="Deployment"
description="Hosting and CI/CD"
>
<PageGrid cols={3}>
<PageCard>
<div className="text-center">
<div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
<Server className="h-6 w-6 text-muted-foreground" />
</div>
<h3 className="font-semibold mb-1">Production</h3>
<p className="text-sm text-muted-foreground mb-2">Live</p>
<p className="text-xs text-muted-foreground">vercel.app</p>
</div>
</PageCard>
<PageCard>
<div className="text-center">
<div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
<Server className="h-6 w-6 text-muted-foreground" />
</div>
<h3 className="font-semibold mb-1">Staging</h3>
<p className="text-sm text-muted-foreground mb-2">Preview</p>
<p className="text-xs text-muted-foreground">staging.vercel.app</p>
</div>
</PageCard>
<PageCard>
<div className="text-center">
<div className="h-12 w-12 rounded-full bg-muted flex items-center justify-center mx-auto mb-3">
<Server className="h-6 w-6 text-muted-foreground" />
</div>
<h3 className="font-semibold mb-1">Development</h3>
<p className="text-sm text-muted-foreground mb-2">Local</p>
<p className="text-xs text-muted-foreground">localhost:3000</p>
</div>
</PageCard>
</PageGrid>
</PageSection>
</PageTemplate>
);
}