@fullstackcraftllc/codevideo-react-components v1.0.1

codevideo-react-components

A series of React components used throughout the CodeVideo ecosystem.

Currently, we only have action badges which are used to represent the name of an action, color coded by domain (file-explorer, editor, terminal, etc.). These badges are used in the CodeVideo Studio as well as in our blog posts.

Usage

Install the package using npm:

npm install @fullstackcraftllc/codevideo-react-components

Import the ActionBadge component in your React application and use it:

import { ActionBadge } from '@fullstackcraftllc/codevideo-react-components';

const App = () => {
  return (
    <>
      <ActionBadge actionName="mouse-move-file-explorer" />
      <ActionBadge actionName="editor-type" />
      <ActionBadge actionName="terminal-type" />
    </>
  );
};

Props

Example

import { ActionBadge } from '@fullstackcraftllc/codevideo-react-components';

const App = () => {
  return (
    <div>
      {/* Basic usage */}
      <ActionBadge actionName="editor-type" />
      
      {/* With all props */}
      <ActionBadge 
        actionName="terminal-type" 
        size="lg" 
        variant="solid" 
        className="my-custom-class" 
        onClick={() => console.log('Badge clicked!')} 
      />
      
      {/* Different domains have different colors */}
      <ActionBadge actionName="mouse-move-file-explorer" />
      <ActionBadge actionName="editor-type" />
      <ActionBadge actionName="terminal-type" />
      <ActionBadge actionName="author-comment" />
      <ActionBadge actionName="slide-next" />
      <ActionBadge actionName="external-open-browser" />
    </div>
  );
};