Poc components react

App.js

import React from 'react';
import logo from './logo.svg';
import './App.css';

import Button from './components/Button'

function App() {
  return (
    <div className="App">
      <Button  label="Label que tu pode passar normal" typeLoader="rings">
        <span key="label">Child personalizdo com tags especificas ou comps</span>
        <span key="action">--- posicionado exatamente onde quer </span>
      </Button>
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

buttonPoC.js

import React, { useState } from "react";

export default function Button({ children, ...props }) {
  console.log("propsss =>  ", props);
  console.log("Childrennn -> ", children);

  const [loading, setLoading] = useState(props.loading);
  const slot = key =>
    (children && children.filter(el => el.key === key)) || false;
  const loader_circle = ({ size = 20, color = "#fff" }) => (
    <svg
      width={size}
      height={size}
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid"
    >
      <circle
        cx="50"
        cy="50"
        fill="none"
        stroke={color}
        stroke-width="10"
        r="35"
        stroke-dasharray="164.93361431346415 56.97787143782138"
        transform="rotate(124.677 50 50)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          repeatCount="indefinite"
          dur="1s"
          values="0 50 50;360 50 50"
          keyTimes="0;1"
        ></animateTransform>
      </circle>
    </svg>
  );
  const loader_rings = () => (
    <svg
      width="20px"
      height="20px"
      viewBox="0 0 100 100"
      preserveAspectRatio="xMidYMid"
    >
      <circle
        cx="50"
        cy="50"
        r="32"
        stroke-width="8"
        stroke="#f0ff"
        stroke-dasharray="50.26548245743669 50.26548245743669"
        fill="none"
        stroke-linecap="round"
        transform="rotate(161.768 50 50)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          dur="1s"
          repeatCount="indefinite"
          keyTimes="0;1"
          values="0 50 50;360 50 50"
        ></animateTransform>
      </circle>
      <circle
        cx="50"
        cy="50"
        r="23"
        stroke-width="8"
        stroke="#f0ff"
        stroke-dasharray="36.12831551628262 36.12831551628262"
        stroke-dashoffset="36.12831551628262"
        fill="none"
        stroke-linecap="round"
        transform="rotate(-161.768 50 50)"
      >
        <animateTransform
          attributeName="transform"
          type="rotate"
          dur="1s"
          repeatCount="indefinite"
          keyTimes="0;1"
          values="0 50 50;-360 50 50"
        ></animateTransform>
      </circle>
    </svg>
  );
  const loader = () =>
    slot("loading").length
      ? slot("loading")
      : loaderContainer(props.typeLoader); //loader_rings({});

  const loaderContainer = type => {
    switch (type) {
      case "circle":
        return loader_circle({
          // size: props.loaderSize,
          // color: props.textColor
        });
      case "rings":
        return loader_rings({
          // size: props.loaderSize,
          // color: props.textColor
        });
      default:
        return loader_rings({
          // size: props.loaderSize,
          // color: props.textColor
        });
    }
  }; // [type]|| loaderRings()
  // const styleTypeButton = types =>
  //   types.filter(type => props[type])[0] || 'filled'
  // const hasPrependIcon =
  //   prependIcon &&
  //   h(
  //     'section',
  //     {
  //       style: {
  //         paddingRight: props.icon && !props.label ? 'auto' : '10px',
  //         display: 'flex'
  //       },
  //       class: {}
  //     },
  //     prependIcon
  //   )
  // const hasAppendIcon =
  //   appendIcon &&
  //   h(
  //     'section',
  //     {
  //       style: {
  //         paddingLeft: props.icon && !props.label ? 'auto' : '10px',
  //         display: 'flex'
  //       },
  //       class: {}
  //     },
  //     appendIcon
  //   )
  const hasLabel = () =>
    slot("label").length ? slot("label") : <span>{props.label}</span>;
  console.log(hasLabel());
  console.log(loader());

  const hasAction = () => (slot("action").length && slot("action")) || "";
  const executeLoading = () => {
    console.log("call of the function", loading);
    setLoading(true);
    setTimeout(() => setLoading(false), 1500);
  };
  return (
    <button onClick={() => executeLoading()}>
      {loading ? loader() : [hasLabel(), hasAction()]}
    </button>
  );
}