import React from "react";
import { Link } from "react-router-dom";


export const BotóSecció = ({titol, linkto}) => {
     return <div style={{
          border: `1px solid #aaaa`,
          borderRadius: `.3rem`,
          padding: `.2rem`,
          backgroundColor: `lightblue`,
          margin: `.5rem`
     }}>
          <Link to={linkto} >{titol}</Link>
     </div>;
};

export const SeccióPobles = () => <BotóSecció
     titol="Pobles"
     linkto="pobles"
/>;

export const SeccióNecessitats = () => <BotóSecció
     titol="Necessitats"
     linkto="necessitats"
/>;

export const SeccióTipus = () => <BotóSecció
     titol="Tipus"
     linkto="tipus"
/>;

export const SeccióUsuaris = () => <BotóSecció
     titol="Usuaris"
     linkto="usuaris"
/>;

export const PanellSeccions = ({children}) => {
     return <><div style={{
          display: `flex`,
          border: `1px solid #cccc`,
          padding: `.5rem`,
          borderRadius: `.5rem`,
          backgroundColor: `lightslategray`
     }}>{children}</div>
     <br />
     </>;
};