379 lines
10 KiB
TypeScript
379 lines
10 KiB
TypeScript
"use client";
|
|
|
|
import { useAnatomy } from "@/components/project/use-anatomy";
|
|
import { useParams } from "next/navigation";
|
|
import { ExternalLink, Copy, Users, EyeOff, LayoutGrid } from "lucide-react";
|
|
|
|
export default function OverviewPage() {
|
|
const params = useParams();
|
|
const projectId = params.projectId as string;
|
|
const workspace = params.workspace as string;
|
|
const { anatomy } = useAnatomy(projectId, { pollMs: 8000 });
|
|
|
|
const activeProjectName = anatomy?.product?.codebases?.[0]?.label ?? "App";
|
|
|
|
// Try to find the primary live URL
|
|
const primaryLive = anatomy?.hosting?.live?.find((l) => !!l.fqdn);
|
|
const displayUrl = primaryLive ? `https://${primaryLive.fqdn}` : null;
|
|
|
|
return (
|
|
<div
|
|
style={{
|
|
padding: "32px 48px",
|
|
fontFamily: '"Outfit", "Inter", sans-serif',
|
|
color: "#18181b",
|
|
maxWidth: 900,
|
|
}}
|
|
>
|
|
{/* Header card */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px 32px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 32,
|
|
}}
|
|
>
|
|
<div style={{ display: "flex", gap: 24, alignItems: "flex-start" }}>
|
|
<div
|
|
style={{
|
|
width: 80,
|
|
height: 80,
|
|
background: "#fafafa",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 16,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
fontSize: "2rem",
|
|
fontWeight: 700,
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
<LayoutGrid size={32} color="#18181b" strokeWidth={1.5} />
|
|
</div>
|
|
<div>
|
|
<h1
|
|
style={{
|
|
fontSize: "1.75rem",
|
|
fontWeight: 600,
|
|
margin: "0 0 8px 0",
|
|
}}
|
|
>
|
|
{activeProjectName}
|
|
</h1>
|
|
<p
|
|
style={{
|
|
fontSize: "0.95rem",
|
|
color: "#71717a",
|
|
margin: "0 0 16px 0",
|
|
maxWidth: 500,
|
|
lineHeight: 1.5,
|
|
}}
|
|
>
|
|
A comprehensive operating system for your users, integrating
|
|
discovery, registration, operations, and growth automation into
|
|
one unified platform.
|
|
</p>
|
|
<div style={{ fontSize: "0.8rem", color: "#a1a1aa" }}>
|
|
Created a few days ago
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
{displayUrl ? (
|
|
<a
|
|
href={displayUrl}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "8px 16px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 500,
|
|
color: "#18181b",
|
|
textDecoration: "none",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<ExternalLink size={16} /> Open App
|
|
</a>
|
|
) : (
|
|
<button
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "8px 16px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 500,
|
|
color: "#a1a1aa",
|
|
cursor: "not-allowed",
|
|
}}
|
|
>
|
|
<ExternalLink size={16} /> Open App
|
|
</button>
|
|
)}
|
|
|
|
<button
|
|
style={{
|
|
display: "flex",
|
|
flexDirection: "column",
|
|
alignItems: "center",
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "4px 16px",
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 6,
|
|
fontSize: "0.9rem",
|
|
fontWeight: 500,
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
<Copy size={14} /> Share App
|
|
</div>
|
|
<div style={{ fontSize: "0.6rem", color: "#71717a" }}>
|
|
win free credits!
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
style={{
|
|
display: "grid",
|
|
gridTemplateColumns: "1fr 1fr",
|
|
gap: 24,
|
|
marginBottom: 24,
|
|
}}
|
|
>
|
|
{/* App Visibility */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<div>
|
|
<h3
|
|
style={{
|
|
fontSize: "1rem",
|
|
fontWeight: 600,
|
|
margin: "0 0 4px 0",
|
|
}}
|
|
>
|
|
App Visibility
|
|
</h3>
|
|
<p style={{ fontSize: "0.85rem", color: "#71717a", margin: 0 }}>
|
|
Control who can access your application
|
|
</p>
|
|
</div>
|
|
</div>
|
|
|
|
<select
|
|
style={{
|
|
width: "100%",
|
|
padding: "10px 14px",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
fontSize: "0.95rem",
|
|
background: "#fafafa",
|
|
outline: "none",
|
|
appearance: "none",
|
|
fontWeight: 500,
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
<option value="public">🌐 Public</option>
|
|
<option value="private">🔒 Private</option>
|
|
</select>
|
|
</div>
|
|
|
|
{/* Invite Users */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
}}
|
|
>
|
|
<div
|
|
style={{
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "flex-start",
|
|
marginBottom: 16,
|
|
}}
|
|
>
|
|
<div>
|
|
<h3
|
|
style={{
|
|
fontSize: "1rem",
|
|
fontWeight: 600,
|
|
margin: "0 0 4px 0",
|
|
}}
|
|
>
|
|
Invite Users
|
|
</h3>
|
|
<p style={{ fontSize: "0.85rem", color: "#71717a", margin: 0 }}>
|
|
Grow your user base by inviting others
|
|
</p>
|
|
</div>
|
|
<Users size={18} color="#a1a1aa" />
|
|
</div>
|
|
|
|
<div style={{ display: "flex", gap: 12 }}>
|
|
<button
|
|
style={{
|
|
flex: 1,
|
|
display: "flex",
|
|
alignItems: "center",
|
|
justifyContent: "center",
|
|
gap: 8,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "10px 0",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
<Copy size={16} /> Copy Link
|
|
</button>
|
|
<button
|
|
style={{
|
|
flex: 1,
|
|
background: "#2563eb",
|
|
color: "#fff",
|
|
border: "none",
|
|
borderRadius: 8,
|
|
padding: "10px 0",
|
|
fontSize: "0.95rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
}}
|
|
>
|
|
Send Invites
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Move to Workspace */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
marginBottom: 24,
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div>
|
|
<h3
|
|
style={{ fontSize: "1rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
|
>
|
|
Move to Workspace
|
|
</h3>
|
|
<p style={{ fontSize: "0.85rem", color: "#71717a", margin: 0 }}>
|
|
Move this app to another workspace
|
|
</p>
|
|
</div>
|
|
<button
|
|
style={{
|
|
background: "transparent",
|
|
color: "#71717a",
|
|
border: "1px solid transparent",
|
|
borderRadius: 8,
|
|
padding: "8px 16px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
transition: "all 0.2s",
|
|
}}
|
|
className="hover:bg-gray-100 hover:border-gray-200 hover:text-gray-900"
|
|
>
|
|
→ Move App
|
|
</button>
|
|
</div>
|
|
|
|
{/* Platform Badge */}
|
|
<div
|
|
style={{
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 12,
|
|
padding: "24px",
|
|
display: "flex",
|
|
justifyContent: "space-between",
|
|
alignItems: "center",
|
|
}}
|
|
>
|
|
<div>
|
|
<h3
|
|
style={{ fontSize: "1rem", fontWeight: 600, margin: "0 0 4px 0" }}
|
|
>
|
|
Platform Badge
|
|
</h3>
|
|
<p style={{ fontSize: "0.85rem", color: "#71717a", margin: 0 }}>
|
|
The "Built with Vibn" badge is currently visible on your app.
|
|
</p>
|
|
</div>
|
|
<button
|
|
style={{
|
|
display: "flex",
|
|
alignItems: "center",
|
|
gap: 8,
|
|
background: "#fff",
|
|
border: "1px solid #e4e4e7",
|
|
borderRadius: 8,
|
|
padding: "8px 16px",
|
|
fontSize: "0.9rem",
|
|
fontWeight: 500,
|
|
cursor: "pointer",
|
|
color: "#18181b",
|
|
}}
|
|
>
|
|
<EyeOff size={16} /> Hide Badge
|
|
</button>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|