Common Components

Common components are several components designed to be used throughout your website.

What's Included

< ActiveLink />

The ActiveLink component is a custom link designed to look like a button. It highlights active links based on the current URL, providing visual feedback to users when they are one a specific page or section.

ActiveLink Usage

<nav>
  <ActiveLink href="/home" ghost={false}>
    Home
  </ActiveLink>
  <ActiveLink href="/about">About</ActiveLink>
</nav>

ActiveLink Props

< Box />

The Box component is a versatile container designed to wrap its children with customizable styling. It serves as a foundational layout component that can be styled and configured using additional classes and props.

Box Usage

import styles from './styles.module.css';
 
<Box className="styles.customBox" style={{ padding: '20px' }}>
  <p>This is a content inside the Box component.</p>
</Box>;

Box Props

< CallToAction />

The CallToAction component is a styled button designed to navigate users to a specified path when clicked.

CallToAction Usage

<CallToAction text="Get Started" path="/start" />

CallToAction Props

< Card />

The Card component is a flexible container designed to wrap and display content in a visually distinct and styled manner. It is ideal for organizing content sections, showcasing information, and enhancing the presentation of grouped elements.

Card Usage

<Card>
  <img src="/path/to/image.jpg" alt="Product Image" />
  <figcaption>Product Name</figcaption>
</Card>

Card Props

< ColorfulButton />

The ColorfulButton component is a large, visually engaging button designed to draw attention with its unique styling.

ColorfulButton Usage

<ColorfulButton onClick={() => alert('Button clicked!')}>
  Click Me
</ColorfulButton>

ColorfulButton Props

< Breadcrumbs />

The Breadcrumbs component is a navigation aid designed to display the current page's path as clickable breadcrumb links.

Breadcrumbs Usage

type BreadcrumbReplaceType = Array<{
  find: string;
  replace: string;
}>;
 
const breadcrumbReplace: BreadcrumbReplaceType = [
  { find: 'home', replace: 'Dashboard' },
];
 
<Breadcrumbs separator=">" breadcrumbReplace={breadcrumbReplace} />;

Breadcrumbs Props

< ContentSection />

The ContentSection component is a flexible layout component designed to display content alongside an image. It allows for easy customization and layout adjustments, including reversing the order of content and image.

ContentSection Usage

import styles from './styles.module.css';
 
<ContentSection
  content={<p>This is some text content.</p>}
  image={<img src="/path/to/image.jpg" alt="Example" />}
  reverse={true}
  className={styles.section}
/>;

ContentSection Props

< DropdownLink />

The DropdownLink component renders a dropdown menu with a list of navigational links. It is designed to display a dropdown of links that are shown when the user hovers over the main link.

DropdownLink Usage

type NavLinkType = {
  title: string;
  nav: Array<{
    title: string;
    url: string;
  }>;
};
 
const navLink: NavLinkType = {
  title: 'Services',
  nav: [
    { title: 'Web Development', url: '/services/web-dev' },
    { title: 'App Development', url: '/services/app-dev' },
    { title: 'SEO Optimization', url: '/services/seo' },
  ],
};
 
<DropdownLink link={navLink} />;

DropdownLink Props

< EmptyState />

The EmptyState component provides a visual cue when no data or entries are available in a specific section of the application. It optionally displays a call-to-action button that navigates the user to a relevant page, depending on the permissions granted.

EmptyState Usage

<EmptyState title="Item" link="/add-item" permission={true} />

EmptyState Props

< ImageSlider />

The ImageSlider component is a responsive image carousel built using the Swiper library. It allows you to display a series of images with pagination controls, making it ideal for showcasing image galleries, product images, or any other visual content that requires smooth sliding functionality.

ImageSlider Usage

const images = [
  '/images/photo1.jpg',
  '/images/photo2.jpg',
  '/images/photo3.jpg',
];
 
<ImageSlider images={images} title="Sample Image Gallery" />;

ImageSlider Props

< List />

The List component is a styled list that allows you to render lists or grouped content together. It is meant to be used together with ListItem.

List Usage

<List>
  <ListItem label="Name" value="John Doe" />
  <ListItem label="Age" value="30" />
  <ListItem label="Location" value="New York" />
</List>

List Props

< ListItem />

The ListItem component is a styled list item that is meant to be used inside a List component.

ListItem Usage

<List>
  <ListItem label="Name" value="John Doe" />
  <ListItem label="Age" value="30" />
  <ListItem label="Location" value="New York" />
</List>

ListItem Props

< MenuItem />

The MenuItem component renders a navigable menu item, styled with optional active and featured states.

MenuItem Usage

type MenuDataType = {
  path: string;
  name?: ReactNode;
  icon?: ReactNode;
  chip?: string;
};
 
const menuData: MenuDataType = {
  path: '/home',
  name: 'Home',
  icon: <HomeIcon />,
  chip: 'New', // Optional chip to display additional information
};
 
<nav>
  <MenuItem data={menuData} featured onClick={() => console.log('Clicked!')} />
</nav>;

MenuItem Props

< Section />

The Section component provides a flexible and styled container for grouping related content within a web page.

Section Usage

<Section>
  <h2>Featured Content<h2>
  <p>This section highlights important information<p>
</Section>

Section Props

< Widget />

The Widget component is a versatile container designed for displaying content with a customizable header.

Widget Usage

import styles from './styles.module.css';
 
<Widget
  title="User Statistics"
  rightActions={<button>Refresh</button>}
  className={styles.widget}
  titleClassName={styles.widgetTitle}
>
  <p>Content goes here...</p>
</Widget>;

Widget Props