Skip to content

Commit 047ae49

Browse files
buberddsbuberdds
authored
Merge pull request #17 from oasisprotocol/mz/createLayout-2
Creation flow layout tweaks
2 parents 71c4f7f + 6188e83 commit 047ae49

File tree

10 files changed

+154
-55
lines changed

10 files changed

+154
-55
lines changed

‎src/pages/CreateApp/AgentStep.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ type AgentStepProps = {
1010

1111
export const AgentStep: FC<AgentStepProps> = ({ handleNext, handleBack }) => {
1212
return (
13-
<CreateLayout currentStep={2}>
14-
<div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
15-
<CreateFormHeader
16-
title="Agent Specific Stuff"
17-
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
18-
/>
19-
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
20-
</div>
13+
<CreateLayout
14+
currentStep={2}
15+
hints={[
16+
{
17+
title: 'Tips and Tricks',
18+
description:
19+
'Ultricies convallis urna habitant blandit risus ultrices facilisi donec. Bibendum semper convallis sit tellus tincidunt tincidunt.',
20+
},
21+
]}
22+
>
23+
<CreateFormHeader
24+
title="Agent Specific Stuff"
25+
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
26+
/>
27+
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
2128
</CreateLayout>
2229
);
2330
};

‎src/pages/CreateApp/BuildStep.tsx‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -10,14 +10,21 @@ type AgentStepProps = {
1010

1111
export const BuildStep: FC<AgentStepProps> = ({ handleNext, handleBack }) => {
1212
return (
13-
<CreateLayout currentStep={3}>
14-
<div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
15-
<CreateFormHeader
16-
title="Build and Deploy"
17-
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
18-
/>
19-
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
20-
</div>
13+
<CreateLayout
14+
currentStep={3}
15+
hints={[
16+
{
17+
title: 'Tips and Tricks',
18+
description:
19+
'Ultricies convallis urna habitant blandit risus ultrices facilisi donec. Bibendum semper convallis sit tellus tincidunt tincidunt.',
20+
},
21+
]}
22+
>
23+
<CreateFormHeader
24+
title="Build and Deploy"
25+
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
26+
/>
27+
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
2128
</CreateLayout>
2229
);
2330
};

‎src/pages/CreateApp/CreateLayout.tsx‎

Lines changed: 49 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -9,18 +9,31 @@ import {
99
} from '@oasisprotocol/ui-library/src/components/ui/sidebar';
1010
import { Layout } from '@oasisprotocol/ui-library/src/components/ui/layout';
1111
import { SidebarItemLabel } from './SidebarItemLabel';
12+
import {
13+
Card,
14+
CardContent,
15+
} from '@oasisprotocol/ui-library/src/components/ui/card';
16+
import { ArrowUpRight } from 'lucide-react';
17+
import { Button } from '@oasisprotocol/ui-library/src/components/ui/button';
1218

1319
type CreateLayoutProps = {
1420
children: ReactNode;
1521
currentStep?: number;
22+
docsLink?: string;
23+
hints?:
24+
| {
25+
title: string;
26+
description: string;
27+
}[]
28+
| undefined;
1629
};
1730

1831
export const CreateLayout: FC<CreateLayoutProps> = ({
1932
children,
2033
currentStep = 1,
34+
docsLink,
35+
hints = [],
2136
}) => {
22-
// Steps are 0-indexed in the index.tsx file, but we're starting from 1 here
23-
// because the first step (Template) has its own layout
2437
const sidebarItems = [
2538
{ label: 'Metadata Input', active: currentStep === 1 },
2639
{ label: 'Agent Specific Stuff', active: currentStep === 2 },
@@ -45,6 +58,7 @@ export const CreateLayout: FC<CreateLayoutProps> = ({
4558
</span>
4659
{sidebarItems.map((item, index) => (
4760
<SidebarItemLabel
61+
completed={index < currentStep - 1}
4862
active={item.active}
4963
key={item.label}
5064
index={index}
@@ -57,7 +71,39 @@ export const CreateLayout: FC<CreateLayoutProps> = ({
5771
</Sidebar>
5872
}
5973
>
60-
<div className="flex-1 p-5 h-5/6">{children}</div>
74+
<div className="flex-1 p-6 h-full">
75+
<div className="flex-1 flex flex-col md:flex-row items-start h-full">
76+
<div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
77+
{children}
78+
</div>
79+
<Card className="rounded-md md:w-[200px] border-0 p-4 gap-0 md:h-full">
80+
<CardContent className="text-muted-foreground text-sm p-0 flex-1">
81+
<div className="flex flex-col justify-between h-full">
82+
{hints.map((hint, index) => (
83+
<div key={index}>
84+
<div className="text-foreground text-sm font-semibold pb-2">
85+
{hint.title}
86+
</div>
87+
<div>{hint.description}</div>
88+
</div>
89+
))}
90+
<Button variant="secondary" asChild className="w-full mt-6">
91+
<a
92+
href={docsLink ?? 'https://docs.oasis.io/'}
93+
target="_blank"
94+
rel="noopener noreferrer"
95+
>
96+
<span className="flex items-center justify-center">
97+
<span>Read our Docs</span>
98+
<ArrowUpRight className="ml-2 h-4 w-4" />
99+
</span>
100+
</a>
101+
</Button>
102+
</div>
103+
</CardContent>
104+
</Card>
105+
</div>
106+
</div>
61107
</Layout>
62108
);
63109
};

‎src/pages/CreateApp/MetadataStep.tsx‎

Lines changed: 16 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -9,15 +9,22 @@ type MetadataStepProps = {
99

1010
export const MetadataStep: FC<MetadataStepProps> = ({ handleNext }) => {
1111
return (
12-
<CreateLayout currentStep={1}>
13-
<div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
14-
<CreateFormHeader
15-
title="Input Your Public ROFL Metadata"
16-
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet
17-
vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
18-
/>
19-
<CreateFormNavigation handleNext={handleNext} />
20-
</div>
12+
<CreateLayout
13+
currentStep={1}
14+
hints={[
15+
{
16+
title: 'Tips and Tricks',
17+
description:
18+
'Ultricies convallis urna habitant blandit risus ultrices facilisi donec. Bibendum semper convallis sit tellus tincidunt tincidunt.',
19+
},
20+
]}
21+
>
22+
<CreateFormHeader
23+
title="Input Your Public ROFL Metadata"
24+
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet
25+
vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
26+
/>
27+
<CreateFormNavigation handleNext={handleNext} />
2128
</CreateLayout>
2229
);
2330
};

‎src/pages/CreateApp/PaymentStep.tsx‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,16 +7,24 @@ type AgentStepProps = {
77
handleNext: () => void;
88
handleBack: () => void;
99
};
10+
1011
export const PaymentStep: FC<AgentStepProps> = ({ handleNext, handleBack }) => {
1112
return (
12-
<CreateLayout currentStep={4}>
13-
<div className="max-w-md mx-auto px-8 py-12 flex flex-col gap-8 items-center">
14-
<CreateFormHeader
15-
title="Payment"
16-
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
17-
/>
18-
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
19-
</div>
13+
<CreateLayout
14+
currentStep={4}
15+
hints={[
16+
{
17+
title: 'Tips and Tricks',
18+
description:
19+
'Ultricies convallis urna habitant blandit risus ultrices facilisi donec. Bibendum semper convallis sit tellus tincidunt tincidunt.',
20+
},
21+
]}
22+
>
23+
<CreateFormHeader
24+
title="Payment"
25+
description="At varius sit sit netus at integer vitae posuere id. Nulla imperdiet vestibulum amet ultrices egestas. Bibendum sed integer ac eget."
26+
/>
27+
<CreateFormNavigation handleNext={handleNext} handleBack={handleBack} />
2028
</CreateLayout>
2129
);
2230
};

‎src/pages/CreateApp/SidebarItemLabel.tsx‎

Lines changed: 19 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,38 @@
11
import type { FC } from 'react';
22
import { cn } from '@oasisprotocol/ui-library/src/lib/utils';
3+
import { CircleCheckBig } from 'lucide-react';
34

45
type CreateLayoutProps = {
56
active: boolean;
7+
completed: boolean;
68
index: number;
79
label: string;
810
};
911

1012
export const SidebarItemLabel: FC<CreateLayoutProps> = ({
1113
active,
14+
completed,
1215
index,
1316
label,
1417
}) => {
1518
return (
1619
<div className="flex items-center gap-3 py-2">
17-
<div
18-
className={cn(
19-
'text-primary-foreground min-w-[24px] w-[24px] h-[24px] rounded-full flex items-center justify-center text-xs font-semibold',
20-
active ? 'bg-primary' : 'bg-muted'
21-
)}
22-
>
23-
{index + 1}
24-
</div>
20+
{completed && (
21+
<CircleCheckBig
22+
className="h-6 w-6"
23+
style={{ color: 'var(--success)' }}
24+
/>
25+
)}
26+
{!completed && (
27+
<div
28+
className={cn(
29+
'text-primary-foreground min-w-[24px] w-[24px] h-[24px] rounded-full flex items-center justify-center text-xs font-semibold',
30+
active ? 'bg-primary' : 'bg-muted'
31+
)}
32+
>
33+
{index + 1}
34+
</div>
35+
)}
2536
<span
2637
className={cn(
2738
'text-sm',

‎src/pages/CreateApp/TemplateStep.tsx‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {
1010
CardContent,
1111
CardFooter,
1212
} from '@oasisprotocol/ui-library/src/components/ui/card';
13-
import ElizaBg from './images/eliza.svg';
13+
import Empyreal from './images/empyreal.svg';
1414

1515
type TemplateStepProps = {
1616
handleNext: () => void;
@@ -31,12 +31,12 @@ export const TemplateStep: FC<TemplateStepProps> = ({ handleNext }) => {
3131
</p>
3232
</div>
3333
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
34-
<Card className="rounded-md">
35-
<div className="rounded-t-md bg-black -mt-6 flex items-center justify-center pb-2">
36-
<img src={ElizaBg} alt="Eliza" />
34+
<Card className="rounded-md pt-6">
35+
<div className="rounded-t-md bg-black -mt-6 flex items-center justify-center">
36+
<img src={Empyreal} alt="Empyreal" className="w-full" />
3737
</div>
38-
<CardHeader>
39-
<CardTitle className="text-white text-lg">elizaOS</CardTitle>
38+
<CardHeader className="gap-0">
39+
<CardTitle className="text-white text-lg">Empyreal</CardTitle>
4040
</CardHeader>
4141
<CardContent className="space-y-4">
4242
<span className="text-muted-foreground text-sm">

‎src/pages/CreateApp/images/empyreal.svg‎

Lines changed: 10 additions & 0 deletions
Loading

‎src/pages/Dashboard/SectionHeader.tsx‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,3 @@ export const SectionHeader: FC<SectionHeaderProps> = ({
3333
</div>
3434
);
3535
};
36-
37-
// 20px white
38-
// 14px muted-foreground

‎src/pages/Dashboard/index.tsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,14 @@ export const Dashboard: FC = () => {
4848
<>
4949
<div className="space-y-12">
5050
<div className="grid grid-cols-1 md:grid-cols-3 gap-6">
51-
<MetricCard title="ROFL Apps Running" value={appsNumber} />
52-
<MetricCard title="Machines Running" value={machinesNumber} />
51+
{isLoading && <Skeleton className="w-full h-[120px]" />}
52+
{isFetched && (
53+
<MetricCard title="ROFL Apps Running" value={appsNumber} />
54+
)}
55+
{isProviderLoading && <Skeleton className="w-full h-[120px]" />}
56+
{isProviderFetched && (
57+
<MetricCard title="Machines Running" value={machinesNumber} />
58+
)}
5359
<MetricCard title="Failures" value={failuresNumber} />
5460
</div>
5561
<SectionHeader

0 commit comments

Comments
 (0)