Skip to content

Commit

Permalink
chore: updated playground
Browse files Browse the repository at this point in the history
  • Loading branch information
@niloofar-deriv
niloofar-deriv committed May 10, 2024
1 parent 80be572 commit 2a02528
Show file tree
Hide file tree
Showing 2 changed files with 166 additions and 14 deletions.
67 changes: 53 additions & 14 deletions playground/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
import {
LegacyReportsIcon,
LabelPairedHouseBlankMdRegularIcon,
LegacyChevronRight2pxIcon
LegacyChevronRight2pxIcon,
} from "@deriv/quill-icons";
import {
MenuItem,
Expand All @@ -13,36 +13,65 @@ import {
DerivLogo,
Button,
Wrapper,
PlatformSwitcher,
Text,
PlatformSwitcherItem,
} from "../src/main";
import { platformsConfig } from "./platformsConfig";

const App = () => {
const { isMobile } = useDevice();
const [is_drawer_open, setDrawerOpen] = React.useState(false);

return (
<div>
{!isMobile ? (
<Header>
<Wrapper
variant="left"
style={{ gap: "15px", padding: "10px" }}
>
<DerivLogo variant="default" />
<Wrapper variant="left">
<PlatformSwitcher
buttonProps={{
icon: platformsConfig[0].buttonIcon,
style: { padding: "0 16px" },
}}
bottomLink={{
text: "Looking for CFDs? Go to Trader’s Hub",
}}
>
{platformsConfig.map(
({ description, href, icon, active }) => (
<PlatformSwitcherItem
key={description}
icon={icon}
href={href}
description={description}
active={active}
/>
),
)}
</PlatformSwitcher>
<MenuItem
style={{ marginLeft: "15px", gap: "5px" }}
style={{ gap: "8px", padding: "16px" }}
as="button"
leftComponent={
<LabelPairedHouseBlankMdRegularIcon />
}
>
Trader's Hub
<Text size="md">Trader's Hub</Text>
</MenuItem>

<MenuItem
style={{ marginLeft: "15px", gap: "5px" }}
style={{ gap: "8px", padding: "16px" }}
as="button"
leftComponent={<LegacyReportsIcon iconSize="xs" />}
>
<Text size="md">Reports</Text>
</MenuItem>
<MenuItem
style={{ gap: "8px", padding: "16px" }}
as="button"
leftComponent={<LegacyReportsIcon iconSize="xs" />}
>
Reports
<Text size="md">Cashier</Text>
</MenuItem>
</Wrapper>
</Header>
Expand All @@ -62,19 +91,29 @@ const App = () => {
<DerivLogo variant="default" />
</Drawer.Header>
<Drawer.Content>
<div style={{display: "flex", flexDirection: "column"}}>
<div
style={{
display: "flex",
flexDirection: "column",
}}
>
<MenuItem
style={{ gap: "5px", display: "flex", padding: "10px" }}
style={{
gap: "5px",
display: "flex",
padding: "10px",
}}
active
as="button"
leftComponent={
<LabelPairedHouseBlankMdRegularIcon />
}
rightComponent={<LegacyChevronRight2pxIcon iconSize="xs" />}
rightComponent={
<LegacyChevronRight2pxIcon iconSize="xs" />
}
>
Trader's Hub
</MenuItem>

</div>
</Drawer.Content>
<Drawer.Footer>This is a footer</Drawer.Footer>
Expand Down
113 changes: 113 additions & 0 deletions playground/platformsConfig.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,113 @@
import React, { ReactNode } from "react";
import {
DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon,
DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon,
PartnersProductSmarttraderBrandLightLogoWordmarkIcon,
PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon,
} from "@deriv/quill-icons/Logo";

export type PlatformsConfig = {
href: string;
description: string;
icon: ReactNode;
buttonIcon: ReactNode;
active: boolean;
showInEU: boolean;
};

export const platformsConfig: PlatformsConfig[] = [
{
href: "https://app.deriv.com",
showInEU: true,
active: true,
description:
"A whole new trading experience on a powerful yet easy to use platform.",
icon: (
<DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
width={148}
height={32}
/>
),
buttonIcon: (
<DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
width={114.97}
height={25}
/>
),
},
{
href: "https://app.deriv.com/bot",
showInEU: false,
active: false,
description: "Automated trading at your fingertips. No coding needed.",
icon: (
<DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
width={121}
height={32}
/>
),
buttonIcon: (
<DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
width={91}
height={24}
/>
),
},
{
href: "https://smarttrader.deriv.com",
showInEU: false,
active: false,
description:
"Trade the world’s markets with our popular user-friendly platform.",
icon: (
<PartnersProductSmarttraderBrandLightLogoWordmarkIcon
width={153}
height={32}
/>
),
buttonIcon: (
<PartnersProductSmarttraderBrandLightLogoWordmarkIcon
width={115}
height={24}
/>
),
},
{
href: "https://bot.deriv.com",
showInEU: false,
active: false,
description:
"Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.",
icon: (
<PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
width={133}
height={32}
/>
),
buttonIcon: (
<PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
width={100}
height={24}
/>
),
},
{
href: "https://app.deriv.com",
showInEU: true,
active: false,
description:
"A whole new trading experience on a powerful yet easy to use platform.",
icon: (
<DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
width={148}
height={32}
/>
),
buttonIcon: (
<DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
width={111}
height={24}
/>
),
},
];

0 comments on commit 2a02528

Please sign in to comment.