@arcteryx/components-design-system

@arcteryx/components-design-system

What is it?

Arc'teryx Atomic Design Components is a library of reusable UI components following the principles of Atomic Design. These components are designed to be highly modular and flexible, allowing developers to build consistent and visually appealing user interfaces across different projects.

Install

npm install --save @arcteryx/components-design-system

Usage

const App = () => {
  // Sample video data (replace with your own video URL, cover image URL, and label)
  const video = {
    url: "https://www.example.com/sample_video.mp4",
    coverImageUrl: "https://www.example.com/sample_cover_image.jpg",
    label: "Sample Video",
  };

  return (
    <div>
      {/* Other components or content */}
      <Video video={video} />
    </div>
  );
};

Configuration

Props

The Video component accepts the following props:

className (optional): Additional CSS class name to be applied to the component for custom styling. video (required): An object containing the video data with the following properties: url (string, required): The URL of the video file to be played. coverImageUrl (string, required): The URL of the video thumbnail (cover image). label (string, required): A descriptive label for the video.

Styling

The component uses styled-components to define its styles. You can customize the appearance of the video thumbnail and modal by modifying the styles in the component file.

Important Note

Ensure that you have the required url, coverImageUrl, and label properties set correctly in the video object. If any of these properties are missing or invalid, the component may not function as expected. .