konnosDashboard
GetStartedHero.tsx107 lines · main
1import { cn } from 'ui'
2
3const Checkbox = () => (
4 <div className="w-[10%] h-full flex items-center border-r border-default px-2">
5 <div className="w-3 h-3 rounded-sm border border-control" />
6 </div>
7)
8
9const Row = ({
10 className,
11 col1,
12 col2,
13 col3,
14}: {
15 className?: string
16 col1: string
17 col2: string
18 col3: string
19}) => (
20 <div className={cn('h-[30px] flex items-center bg-studio border-b border-default', className)}>
21 <Checkbox />
22 <div className="w-[15%] h-full flex items-center border-r border-default px-2">
23 <p className="text-xs">{col1}</p>
24 </div>
25 <div className="w-[45%] h-full flex items-center border-r border-default px-2">
26 <p className="text-xs">{col2}</p>
27 </div>
28 <div className="w-[30%] h-full flex items-center px-2">
29 <p className="text-xs">{col3}</p>
30 </div>
31 </div>
32)
33
34export const GetStartedHero = () => {
35 return (
36 <div className="w-full max-w-[500px] h-full pb-10 lg:pb-0 relative pointer-events-none">
37 <div
38 className={cn(
39 'w-[290px] lg:w-[400px] h-[180px] bg-alternative border border-default',
40 'rounded-t px-4 py-3 space-y-1 overflow-hidden'
41 )}
42 >
43 <div className="text-xs font-mono space-x-4 flex items-center">
44 <span className="text-foreground-light">1</span>
45 <p className="text-blue-900">
46 create table <span className="text-foreground">todos {`(`}</span>
47 </p>
48 </div>
49 <div className="text-xs font-mono space-x-8 flex items-center">
50 <span className="text-foreground-light">2</span>
51 <p className="text-foreground">
52 id <span className="text-blue-900">bigint generated by default</span>,
53 </p>
54 </div>
55 <div className="text-xs font-mono space-x-8 flex items-center">
56 <span className="text-foreground-light">3</span>
57 <p className="text-foreground">
58 task <span className="text-blue-900">text</span>,
59 </p>
60 </div>
61 <div className="text-xs font-mono space-x-8 flex items-center">
62 <span className="text-foreground-light">4</span>
63 <p className="text-foreground">
64 status <span className="text-blue-900">status default 'Not Started'</span>,
65 </p>
66 </div>
67 <div className="text-xs font-mono space-x-8 flex items-center">
68 <span className="text-foreground-light">5</span>
69 <p className="text-foreground">
70 user_id <span className="text-blue-900">uuid references auth.users not null</span>,
71 </p>
72 </div>
73 <div className="text-xs font-mono space-x-8 flex items-center">
74 <span className="text-foreground-light">6</span>
75 <p className="text-foreground">
76 inserted_at <span className="text-blue-900">timestamp with time zone</span>,
77 </p>
78 </div>
79 <div className="text-xs font-mono space-x-8 flex items-center">
80 <span className="text-foreground-light">7</span>
81 <p className="text-foreground">
82 updated_at <span className="text-blue-900">timestamp with time zone</span>,
83 </p>
84 </div>
85 <div className="text-xs font-mono space-x-4 flex items-center">
86 <span className="text-foreground-light">8</span>
87 <p className="text-blue-900">{`);`}</p>
88 </div>
89 </div>
90 <div
91 className={cn(
92 'w-[260px] lg:w-[320px] h-[160px] lg:h-[220px] bg-surface-100 border border-default',
93 'absolute right-0 top-[50px] lg:top-[-40px] rounded-t overflow-y-hidden'
94 )}
95 >
96 <Row col1="id" col2="task" col3="status" className="h-[24px] bg-surface-100" />
97 <Row col1="1" col2="Create a project" col3="Complete" />
98 <Row col1="2" col2="Read documentation" col3="Complete" />
99 <Row col1="3" col2="Build application" col3="In progress" />
100 <Row col1="4" col2="Connect Briven" col3="In progress" />
101 <Row col1="5" col2="Deploy project" col3="Not started" />
102 <Row col1="6" col2="Get users" col3="Not started" />
103 <Row col1="7" col2="Upgrade to Pro" col3="Not started" />
104 </div>
105 </div>
106 )
107}