cfbender/snowballtools-base
1
0
Fork 0
forked from cerc-io/snowballtools-base
Code Pull Requests Activity

🔧 chore: add render component

Browse Source
This commit is contained in:
Andre H 2024-03-04 10:40:06 +08:00
parent 6c42a22972
commit 8f0c39022d
2 changed files with 53 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
packages/frontend/src/pages/components/index.tsx
View File

@ -26,6 +26,7 @@ import {
import { renderInputs } from './renders/input';
import { RADIO_OPTIONS } from './renders/radio';
import { SEGMENTED_CONTROLS_OPTIONS } from './renders/segmentedControls';
import { renderHorizontalSteps, renderVerticalSteps } from './renders/steps';
import {
renderTabWithBadges,
renderTabs,
@ -56,6 +57,17 @@ const Page: React.FC = () => {
<div className="w-full h border border-gray-200 px-20 my-10" />
{/* Steps */}
<div className="flex flex-col gap-10 items-center justify-between">
<div className="flex flex-col gap-10 items-center justify-between">
<h1 className="text-2xl font-bold">Steps</h1>
<div className="flex flex-col gap-10 items-center justify-center">
{renderVerticalSteps()}
{renderHorizontalSteps()}
</div>
</div>
</div>
{/* Tag */}
<div className="flex flex-col gap-10 items-center justify-between">
<div className="flex flex-col gap-10 items-center justify-between">

41
packages/frontend/src/pages/components/renders/steps.tsx Normal file
View File

@ -0,0 +1,41 @@
import React from 'react';
import { Steps } from 'components/shared/Steps';
export const renderVerticalSteps = () => {
return (
<Steps
currentIndex={1}
steps={[
{
label: 'Create repository',
},
{
label: 'Deploy',
},
{
label: `What's next?`,
},
]}
/>
);
};
export const renderHorizontalSteps = () => {
return (
<Steps
orientation="horizontal"
currentIndex={1}
steps={[
{
label: 'Create repository',
},
{
label: 'Deploy',
},
{
label: `What's next?`,
},
]}
/>
);
};