@brandonowens/elegant-ui/dist/index.d.ts

Elegant is the easiest way to create a new static website or blog, and publish it online. This is the core Elegant UI component library.

import React from 'react';

interface Props {
    /**
     * The url css text color classes.
     */
    linkColor?: string;
    /**
     * A copyright company name to be included in the footer.
     */
    copyright?: string;
}
/**
 * The Built with Elegant mark to be used in footers.
 * @returns An html element to be used in Elegant footers.
 */
declare function BuiltWithElegant({ linkColor, copyright }: Props): React.JSX.Element;

interface CardProps {
    /**
     * Html that can be passed directly to the card component.
     */
    children: React.ReactNode;
    /**
     * Custom css classes that can be applied directly to the card.
     */
    className?: string;
    /**
     * Custom padding css classes that can be applied to the card.
     */
    padding?: string;
}
/**
 * A Card component.
 * @returns A pre-styled html card element.
 */
declare function Card({ children, className, padding }: CardProps): React.JSX.Element;

interface FacebookIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A Facebook SVG Icon
 * @returns A Facebook svg icon.
 */
declare function FacebookIcon({ className }: FacebookIconProps): React.JSX.Element;

interface GitHubIconProps {
    /**
     * Custom css classnames to be applied to the icon.
     */
    className?: string;
}
/**
 * A GitHub SVG Icon.
 * @returns A GitHub svg icon.
 */
declare function GitHubIcon({ className }: GitHubIconProps): React.JSX.Element;

interface InstagramIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * An Instagram SVG Icon
 * @returns An Instagram svg icon.
 */
declare function InstagramIcon({ className }: InstagramIconProps): React.JSX.Element;

interface LinkedInIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A LinkedIn SVG Icon
 * @returns An LinkedIn svg icon.
 */
declare function LinkedInIcon({ className }: LinkedInIconProps): React.JSX.Element;

interface MoonIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
    /**
     * Is the icon active?
     */
    selected?: boolean;
    /**
      * The selected icon fill color
      */
    fillColor?: string;
    /**
     * The selected icon stroke color
     */
    strokeColor?: string;
}
/**
 * A moon SVG icon.
 * @returns A moon SVG icon.
 */
declare function MoonIcon({ className, selected, fillColor, strokeColor }: MoonIconProps): React.JSX.Element;

interface PCIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
    /**
     * Is the icon active?
     */
    selected?: boolean;
    /**
     * The selected icon fill color
     */
    fillColor?: string;
    /**
     * The selected icon stroke color
     */
    strokeColor?: string;
}
/**
 * A PC SVG icon.
 * @returns A PC SVG icon.
 */
declare function PCIcon({ className, selected, fillColor, strokeColor }: PCIconProps): React.JSX.Element;

interface SunIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
    /**
     * Is the icon active?
     */
    selected?: boolean;
    /**
     * The selected icon fill color
     */
    fillColor?: string;
    /**
     * The selected icon stroke color
     */
    strokeColor?: string;
}
/**
 * A sun SVG icon.
 * @returns A sun SVG icon.
 */
declare function SunIcon({ className, selected, fillColor, strokeColor }: SunIconProps): React.JSX.Element;

interface TwitterIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A Twitter SVG Icon
 * @returns An Twitter svg icon.
 */
declare function TwitterIcon({ className }: TwitterIconProps): React.JSX.Element;

interface YouTubeIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A YouTube SVG Icon
 * @returns An YouTube svg icon.
 */
declare function YouTubeIcon({ className }: YouTubeIconProps): React.JSX.Element;

interface DiscordIconProps {
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A Discord SVG Icon
 * @returns A Discord svg icon.
 */
declare function DiscordIcon({ className }: DiscordIconProps): React.JSX.Element;

interface VersionSelectorProps {
    /**
     * The current version.
     */
    version: string;
    /**
     * Past versions to be displayed in the dropdown.
     */
    pastVersions: Link[];
    /**
     * css classes to be applied to the link to give it color.
     */
    linkColor?: string;
    /**
     * Custom css classnames to be applied to the icon
     */
    className?: string;
}
/**
 * A version selector component to be used within headers.
 * @returns A selector component with dropdown options.
 */
declare function VersionSelector({ version, pastVersions, linkColor, className }: VersionSelectorProps): React.JSX.Element;
/**
 * A url link type.
 */
interface Link {
    /**
     * The urls label to be displayed to users.
     */
    label: string;
    /**
     * The actual url link.
     */
    href: string;
}

interface ElegantLogoProps {
    /**
     * CSS class names to be applied to the logo
     */
    className?: string;
    /**
     * The css color classes for the logo.
     */
    color?: string;
}
/**
 * @returns An SVG logo
 */
declare function ElegantLogo({ className, color, ...props }: ElegantLogoProps): React.JSX.Element;

interface TrashIconProps {
    /**
     * Custom css classnames to be applied to the icon.
     */
    className?: string;
}
/**
 * A Trash SVG Icon
 * @returns A Trash svg icon.
 */
declare function TrashIcon({ className }: TrashIconProps): React.JSX.Element;

/**
 * Should we display the Next button?
 * @param currentPage The currently active page number.
 * @param totalPosts The total number of posts.
 * @param perPage The total posts per page.
 * @returns a boolean representing if the next button should be visible or not.
 */
declare function ShowNextButton(currentPage: number, totalPosts: number, perPage: number): true | undefined;
/**
 * Get an ordered list of the pages to be displayed.
 * @param totalPosts The total number of posts.
 * @param perPage The total posts per page.
 * @returns A list of pages, which may include ellipses if the list is too long.
 */
declare function GetPageList(totalPosts: number, perPage: number): string[];

/**
 *
 * @param appName The application's name. Ex: "Elegant".
 * @param appTagline The application's tag line. Ex: "This App is Great!"
 * @returns An properly cased string for the applications meta title.
 */
declare function MetaTitle(appName: string, appTagline: string): string;

interface ButtonProps {
    /**
     * The text to be displayed on the button.
     */
    text: string;
    /**
     * The variant type of button.
     */
    variant?: string;
    /**
     * Custom CSS classes to be applied to the button.
     */
    className?: string;
    /**
     * Provide a url to make this button a Link.
     */
    href?: string;
    /**
     * The primary css color class string.
     */
    primary?: string;
    /**
     * The secondary css color class string.
     */
    secondary?: string;
}
/**
 * A simple button.
 * @returns A pre styled button.
 */
declare function Button({ text, variant, className, href, primary, secondary, ...props }: ButtonProps): React.JSX.Element;

export { BuiltWithElegant, Button, type ButtonProps, Card, type CardProps, DiscordIcon, type DiscordIconProps, ElegantLogo, FacebookIcon, type FacebookIconProps, GetPageList, GitHubIcon, type GitHubIconProps, InstagramIcon, type InstagramIconProps, LinkedInIcon, type LinkedInIconProps, MetaTitle, MoonIcon, type MoonIconProps, PCIcon, type PCIconProps, ShowNextButton, SunIcon, type SunIconProps, TrashIcon, type TrashIconProps, TwitterIcon, type TwitterIconProps, VersionSelector, type VersionSelectorProps, YouTubeIcon, type YouTubeIconProps };