@aleohq/components

Aleo Components

A component library for building websites that follow the Aleo brand.

Installation

This component library requires Ant Design and Aleo UI.

$ npm i antd @aleohq/ui

Then, you can install this library.

$ npm i @aleohq/components

Usage

AleoThemeProvider

This is the most important component, and is REQUIRED for this library to function correctly. You should wrap this around your main <App /> component.

You must provide a theme. For supported themes, see Aleo UI. Important: the theme prop input is camel-case. Ex: lightBlue

ReactDOM.render(
    <React.StrictMode>
        <AleoThemeProvider theme="blue">
            <App />
        </AleoThemeProvider>
    </React.StrictMode>,
    document.getElementById('root')
);

AleoThemeContext

You can use the AleoThemeContext to retrieve the primary color. It returns a hex string, such as #ffffff.

const Example = () => {
    const theme = useContext(AleoThemeContext);

    return <h1 style={{ color: theme.primaryColor }}>Hello World!</h1>;
}

AleoHeader

You must provide a Logo and children. Optionally, you can provide logoRender, allowing you to wrap the logo inside a Link or a.

AleoHeader has justify-content: space-between. The following code will render the links next to the logo and the button on the far right side.

<AleoHeader logo={aleoLogo} logoRender={logo => <a href="/">{logo}</a>}>
    <Space size={30}>
        <a>For Developers</a>
        <a>Blog</a>
        <a>Opportunities</a>
    </Space>

    <Button type="primary">Subscribe</Button>
</AleoHeader>

AleoLargeFooter

Similar to AleoHeader, you must provide a Logo. You must also provide a list of links. This list will render on the left of the static links.

You can optionally provide a linkRender function, allowing you to wrap your link in a Link or a tag (or anything else).

const aleoLinks = [
    { url: '', label: 'Aleo.pm' },
    { url: '', label: 'Home' },
    { url: '', label: 'Most Downloaded' },
    { url: '', label: 'New Packages' },
    { url: '', label: 'Just Updated' }
];

<AleoLargeFooter logo={logo} links={aleoLinks} linkRender={(link) => <a href={link.url}>{link.label}</a>} />

AleoMiniFooter

This is a mini version of our footer. You only need to provide a Logo and optionally a render function.

<AleoMiniFooter logo={aleoLogo} logoRender={logo => <a href="/">{logo}</a>} />

AleoAuthModal

You can use this component to create authentication modals.

import background from './src/assets/sign-up.png'; // Import an image file

<AleoAuthModal
    footer={null}
    {...args}
    graphicTitle="Sign In"
    graphicSubtitle="Sign in and participate in the Aleo Setup."
    background={background} // Use the image file!
    closable
>
    <Form>
        <Form.Item name="username">
            <Input placeholder="Username" size="large" />
        </Form.Item>

        <Form.Item name="password">
            <Input
                placeholder="Password"
                type="password"
                size="large"
            />
        </Form.Item>

        <Form.Item>
            <ButtonWrapper>
                <Button type="primary" size="large">
                    Sign In
                </Button>
            </ButtonWrapper>
        </Form.Item>
    </Form>
</AleoAuthModal>

AleoTypography

You must provide textStyle, which dictates the size of the text. You can optionally provide weight and type, which determine the font weight and the color, respectively.

type = primary sets the text color to your app's primary color, determined by AleoThemeProvider.

type = secondary sets the text color to gray-9.

type = default sets the text color to white.

type Style =
    | 'title' // 56pt
    | 'heading-1' // 46pt
    | 'heading-2' // 38pt
    | 'heading-3' // 30pt
    | 'heading-4' // 24pt
    | 'subtitle' // 20pt
    | 'body' // 16pt
    | 'body-small' // 14pt
    | 'footnote'; // 12pt
type Weight = 'normal' | 'semibold';
type Type = 'default' | 'primary' | 'secondary';

<AleoTypography textStyle="subtitle" type="primary" weight="semibold">Zero-Knowledge is Finally Here</AleoTypography>

<AleoTypography textStyle="title" weight="semibold">Where Applications Become Private.</AleoTypography>

<AleoTypography textStyle="body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquid, corporis distinctio
    dolorum ea eius enim ex impedit in ipsa labore, maiores possimus repudiandae sapiente sed, similique totam velit
    voluptate! Rerum.</AleoTypography>

MaskText

You can use this component to mask text. It can be a gradient, an image, or anything else that the background CSS property accepts.

<MaskText mask="linear-gradient(90deg, #0BACA2 1%, #6BEA65 100%)">
    <AleoTypography textStyle="title" weight="semibold">
        Hello World!
    </AleoTypography>
</MaskText>

<MaskText mask={`url(${maskExample})`}>
    <AleoTypography textStyle="title" weight="semibold">
        Hello World!
    </AleoTypography>
</MaskText>

AleoIcon

This component accepts icon, which is an OrionIcon, minus the prefix and suffix. If you want o-user-1, you provide user.

It also accepts fontSize and color, optionally. Guess what they do.

<AleoIcon icon="user" />

If you want a list of supported icons, the ./src/assets/icons/iconfont.css file might help you.

Misc Icons

This library also has a couple of misc icons.

<DiscordIcon />

<TwitterIcon />

<GitHubIcon />

<UserIcon />