Skip to content

Commit a75cf55

Browse files
dahaldahal
authored
feat: complete captable with CTA to get started (#78)
* feat: create a wrapper to wrap around elements to give a nice looking border and shadow * feat: complete Captable empty state page * feat: render firstName based on sesion
1 parent f33c030 commit a75cf55

File tree

7 files changed

+136
-17
lines changed

7 files changed

+136
-17
lines changed

‎src/app/(authenticated)/(onboarded)/[publicId]/layout.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,14 @@ const DashboardLayout = async ({
2222
const companies = await getCompanyList(user.id);
2323

2424
return (
25-
<div className="flex bg-gray-50">
26-
<aside className="sticky top-0 hidden h-screen w-64 flex-shrink-0 flex-col lg:flex">
25+
<div className="flex min-h-screen bg-gray-50">
26+
<aside className="sticky top-0 hidden min-h-full w-64 flex-shrink-0 flex-col lg:flex lg:border-r">
2727
<SideBar companies={companies} publicId={publicId} />
2828
</aside>
29-
<div className="flex flex-grow flex-col lg:border-l">
29+
<div className="flex h-full flex-grow flex-col">
3030
<NavBar companies={companies} publicId={publicId} />
3131
<div className="mx-auto min-h-full w-full px-5 py-10 lg:px-8 2xl:max-w-screen-xl">
32-
<div className="rounded border bg-white p-10 shadow">{children}</div>
32+
{children}
3333
</div>
3434
</div>
3535
</div>

‎src/app/(authenticated)/(onboarded)/[publicId]/page.tsx

Lines changed: 102 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,107 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
import { useSession } from "next-auth/react";
5+
import { useParams } from "next/navigation";
6+
import { Button } from "@/components/ui/button";
7+
import { RiArrowRightLine } from "@remixicon/react";
8+
19
const CaptablePage = () => {
10+
const params = useParams<{ publicId: string }>();
11+
const { data } = useSession();
12+
const firstName = data?.user.name?.split(" ")[0];
13+
214
return (
3-
<div>
4-
<span>Captable page</span>
15+
<div className="flex flex-wrap">
16+
<div className="mb-10 w-full md:w-1/2">
17+
<div className="md:max-w-lg">
18+
<header className="mb-10">
19+
<h3 className="font-medium">
20+
Welcome to OpenCap{firstName && `, ${firstName}`} 👋
21+
</h3>
22+
<p className="text-md text-muted-foreground">
23+
Let{`'`}s start managing your company{`'`}s cap table.
24+
</p>
25+
</header>
26+
<div className="-m-5 mb-9 flex flex-wrap">
27+
<div className="w-full px-5 py-2">
28+
<div className="-m-4 flex flex-wrap">
29+
<div className="w-auto p-4">
30+
<div className="relative mb-3 h-16 w-16 text-lg font-semibold text-primary">
31+
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
32+
<span className="text-orange-500">1</span>
33+
</div>
34+
</div>
35+
</div>
36+
<div className="flex-1 p-4">
37+
<div className="md:max-w-xs">
38+
<h4 className="leading-normal">Stakeholders</h4>
39+
<p className="text-md text-sm leading-relaxed text-muted-foreground">
40+
Start inviting your company{`'`}s stakeholders.
41+
</p>
42+
</div>
43+
</div>
44+
</div>
45+
</div>
46+
<div className="w-full px-5 py-2">
47+
<div className="-m-4 flex flex-wrap">
48+
<div className="w-auto p-4">
49+
<div className="relative mb-3 h-16 w-16 text-lg font-semibold text-primary">
50+
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
51+
<span className="text-orange-500">2</span>
52+
</div>
53+
</div>
54+
</div>
55+
<div className="flex-1 p-4">
56+
<div className="md:max-w-xs">
57+
<h4 className="leading-normal">
58+
Share classes & equity plans
59+
</h4>
60+
<p className="text-md text-sm leading-relaxed text-muted-foreground">
61+
Setup share classes and equity plans.
62+
</p>
63+
</div>
64+
</div>
65+
</div>
66+
</div>
67+
<div className="w-full px-5 py-2">
68+
<div className="-m-4 flex flex-wrap">
69+
<div className="w-auto p-4">
70+
<div className="relative mb-3 h-16 w-16 text-lg font-semibold text-primary">
71+
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
72+
<span className="text-orange-500">3</span>
73+
</div>
74+
</div>
75+
</div>
76+
<div className="flex-1 p-4">
77+
<div className="md:max-w-xs">
78+
<h4 className="leading-normal">Issue equities</h4>
79+
<p className="text-md text-sm leading-relaxed text-muted-foreground">
80+
You are ready to go, start issueing equities, optons and
81+
convertibles.
82+
</p>
83+
</div>
84+
</div>
85+
</div>
86+
</div>
87+
</div>
88+
<div className="md:inline-block">
89+
<Button size="lg">
90+
<Link href={`/${params.publicId}/stakeholders`}>
91+
Let{`'`}s get started
92+
<RiArrowRightLine className="ml-5 inline-block h-5 w-5" />
93+
</Link>
94+
</Button>
95+
</div>
96+
</div>
97+
</div>
98+
<div className="w-full md:w-1/2">
99+
<img
100+
className="mx-auto max-h-[470px] transform transition duration-1000 ease-in-out hover:translate-y-[-12px]"
101+
src="https://placehold.co/450x500?text=Placeholder"
102+
alt=""
103+
/>
104+
</div>
5105
</div>
6106
);
7107
};

‎src/app/(authenticated)/(onboarded)/[publicId]/stakeholders/page.tsx

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1+
import BorderWrapper from "@/components/shared/BorderWrapper";
12
import MemberModal from "@/components/stakeholder/member-modal";
23
import MemberTable from "@/components/stakeholder/member-table";
34
import { Button } from "@/components/ui/button";
4-
55
import { Separator } from "@/components/ui/separator";
66
import { withServerSession } from "@/server/auth";
77
import { getMembers } from "@/server/stakeholder";
@@ -15,7 +15,7 @@ const StakeholdersPage = async () => {
1515
<div className="flex flex-col gap-y-3">
1616
<div className="flex items-center justify-between gap-y-3 ">
1717
<div className="gap-y-3">
18-
<h2 className="text-xl font-medium">Stakeholders</h2>
18+
<h3 className="font-medium">Stakeholders</h3>
1919
<p className="text-sm text-muted-foreground">
2020
Manage your company{`'`}s stakeholders
2121
</p>
@@ -39,10 +39,10 @@ const StakeholdersPage = async () => {
3939
</MemberModal>
4040
</div>
4141
</div>
42-
<Separator />
43-
<div>
42+
43+
<BorderWrapper className="mt-3">
4444
<MemberTable members={members} />
45-
</div>
45+
</BorderWrapper>
4646
</div>
4747
);
4848
};

‎src/components/dashboard/sidebar/index.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -184,7 +184,10 @@ export function SideBar({ className, publicId, companies }: SideBarProps) {
184184
<li key={item.name}>
185185
{item.subNav ? (
186186
<Accordion type="single" collapsible>
187-
<AccordionItem value="item-1" className="border-none">
187+
<AccordionItem
188+
value="item-1"
189+
className="-my-1 border-none"
190+
>
188191
<div className="flex">
189192
<item.icon
190193
className={cn(

‎src/components/shared/BorderWrapper.tsx

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import { cn } from "@/lib/utils";
2+
3+
type BorderWrapperProps = {
4+
className?: string;
5+
children: React.ReactNode;
6+
};
7+
8+
const BorderWrapper = ({ className, children }: BorderWrapperProps) => {
9+
return (
10+
<div className={cn("rounded border bg-white p-10 shadow-sm", className)}>
11+
{children}
12+
</div>
13+
);
14+
};
15+
16+
export default BorderWrapper;

‎src/components/shared/empty-state.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@ const EmptyState = ({
3535
className={cn(bordered && "rounded-xl border", "bg-white px-6 pt-5")}
3636
>
3737
<div className="mx-auto w-full max-w-lg py-16 text-center">
38-
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full border">
39-
{icon}
38+
<div className="mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-orange-100">
39+
<span className="text-orange-500">{icon}</span>
4040
</div>
4141

4242
{title && <h3 className="mb-5 text-3xl font-semibold">{title}</h3>}

‎src/styles/globals.css

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -80,13 +80,13 @@
8080
@apply text-6xl sm:text-7xl;
8181
}
8282
h2 {
83-
@apply text-4xl;
83+
@apply text-4xl sm:text-5xl;
8484
}
8585
h3 {
86-
@apply text-2xl font-medium;
86+
@apply text-2xl font-medium sm:text-3xl;
8787
}
8888
h4 {
89-
@apply text-lg uppercase tracking-widest;
89+
@apply text-lg font-medium sm:text-xl;
9090
}
9191
}
9292

0 commit comments

Comments
 (0)