Create component gallery

Issue created but @brauliodiez needs to work on definition

We need to create a component gallery:

Just only the list (not the components header)

The idea could be just to create a flexbox container (wrap) and include this components there.

This gallery will be resued in the containers and shapes section, so we can create first a generic list container.

Proposal:

Under common/components let's create a shape-gallery folder.

And let's define a generic model

./src/common/components/gallery/model.ts

interface ItemInfo {
   thumbnailSrc : string; // svg link
   type : string; // this will be passed along when needed
}

Then we will implement a ItemComponent

./src/common/components/gallery/item-component.ts

interface Props {
    const itemInfo: ItemInfo;
}
export const ItemComponent  : React.FC<Props> = (props) => {
   // TODO add a flexbox container
   // display the picture
}

The create a GalleryComponent

interface Props {
   const itemCollection : ItemInfo[];
}

const GalleryComponent : React.FC<Props> = (props) => {
  const {itemCollection} = props;

  return (
     <div> // TODO flex container wrap here
       // TODO: add a map here
       // Per item just instantiate the ItemInfo component
     </div>
  );
}

About sample SVGs you can find them (there are three created):

https://github.com/brauliodiez/konba-playground/tree/main/public/widgets

Lemoncode / quickmock

Create component gallery #10