LukeParke/firecamp
1
0
Fork 0
mirror of https://github.com/LukeHagar/firecamp.git synced 2025-12-06 12:27:44 +00:00
Code Issues Packages Projects Releases Wiki Activity

chore: added InviteInfo component in home tab

Browse Source
This commit is contained in:
Nishchit14
2023-05-02 13:11:35 +05:30
parent fd38d05d07
commit 33e1d4019f
1 changed files with 85 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
platform/firecamp-platform/src/components/tabs/home/Home.tsx
View File

@@ -1,7 +1,7 @@
import { FC, useEffect } from 'react'; import { FC, useEffect } from 'react';
import cx from 'classnames'; import cx from 'classnames';
import shallow from 'zustand/shallow'; import shallow from 'zustand/shallow';
import { Container, EditorApi } from '@firecamp/ui'; import { Container, EditorApi, Row, Column } from '@firecamp/ui';
import { ERequestTypes, EEditorTheme } from '@firecamp/types'; import { ERequestTypes, EEditorTheme } from '@firecamp/types';
import { import {
FcIconGetSquare, FcIconGetSquare,
@@ -28,49 +28,56 @@ const Home: FC<any> = () => {
}; };
return ( return (
<Container className="px-14 py-20" overflow="visible"> <Row flex={1} overflow="auto" className="h-full">
<Container.Header> <Column>
<div className="text-2xl mb-8 font-normal"> <Container className="px-14 py-20" overflow="visible">
Welcome To Firecamp! <Container.Header>
<span className="block text-base font-light text-appForegroundInActive"> <div className="text-2xl mb-8 font-normal">
This campsite is designed for you, giving you the power to do what Welcome To Firecamp!
you love with APIs. <span className="block text-base font-light text-appForegroundInActive">
</span> This campsite is designed for you, giving you the power to do
</div> what you love with APIs.
</Container.Header> </span>
<Container.Body overflow="visible"> </div>
<div className="mb-8"> </Container.Header>
<div className="block text-base uppercase font-semibold text-appForegroundInActive mb-6"> <Container.Body overflow="visible">
Popular Requests <div className="mb-8">
</div> <div className="block text-base uppercase font-semibold text-appForegroundInActive mb-6">
<div className="flex-col border-b border-appBorder pb-4 w-fit flex-none"> Popular Requests
<RequestItem </div>
label="Create Rest API" <div className="flex-col border-b border-appBorder pb-4 w-fit flex-none">
icon={<FcIconGetSquare size={50} />} <RequestItem
openRequest={() => _openTab(ERequestTypes.Rest)} label="Create Rest API"
/> icon={<FcIconGetSquare size={50} />}
<RequestItem openRequest={() => _openTab(ERequestTypes.Rest)}
label="Create GraphQL Playground" />
icon={<FcIconGraphQL size={24} />} <RequestItem
openRequest={() => _openTab(ERequestTypes.GraphQL)} label="Create GraphQL Playground"
/> icon={<FcIconGraphQL size={24} />}
<RequestItem openRequest={() => _openTab(ERequestTypes.GraphQL)}
label="Create WebSocket Playground" />
icon={<FcIconWebSocket size={24} />} <RequestItem
openRequest={() => _openTab(ERequestTypes.WebSocket)} label="Create WebSocket Playground"
hasInvertIcon={true} icon={<FcIconWebSocket size={24} />}
/> openRequest={() => _openTab(ERequestTypes.WebSocket)}
<RequestItem hasInvertIcon={true}
label="Create SocketIO Playground" />
icon={<FcIconSocketIoSquare size={24} />} <RequestItem
openRequest={() => _openTab(ERequestTypes.SocketIO)} label="Create SocketIO Playground"
hasInvertIcon={true} icon={<FcIconSocketIoSquare size={24} />}
/> openRequest={() => _openTab(ERequestTypes.SocketIO)}
</div> hasInvertIcon={true}
</div> />
<Theme /> </div>
</Container.Body> </div>
</Container> <Theme />
</Container.Body>
</Container>
</Column>
<Column className="p-8 px-8">
<InviteInfo />
</Column>
</Row>
); );
}; };
@@ -225,3 +232,37 @@ interface IRequestItem {
/** Open request tab */ /** Open request tab */
openRequest: () => void; openRequest: () => void;
} }
const InviteInfo = ({ organisation = true }) => {
return (
<div className="flex flex-col border border-appBorder shadow-md p-4">
<p className={'text-base font-semibold mb-2 mt-1'}>
{organisation
? "You're in the `My Workspace` workspace of the `Firecamp` organization."
: `You're right now in your personal workspace`}
</p>
{organisation ? (
<p className="text-base text-appForegroundInActive mb-2">
You can invite your team/colleagues to this workspace to work
collaboratively.
</p>
) : (
<p className="text-base text-appForegroundInActive mb-2">
The personal workspace is not meant to work collaboratively, for now,
you can create an organization and invite your team/colleagues to work
collaboratively.
</p>
)}
<a
className="text-base font-semibold inline-block !text-info cursor-pointer mb-2"
href=""
>
{organisation
? 'create an organization'
: 'invite your team/colleagues'}
</a>
</div>
);
};