Crear un componente Card

import './App.css'
import CardList from './components/CardList'

function App() {
    return (
    <>
    <h1>HOLA</h1>
    <CardList/>
    </>
  );
}

export default App

import React from 'react'
import Card from './Card'
import './cardList.css'

const CardList = () => {
  return (
    <>
      <div className="cardlist">
        <h2>Lista de Cursos</h2>
        <Card name="Javascript" postCount="110" linkUrl="https://codea.app/javascript" linkName="Ver Info" />   
        <Card name="NextJS"  postCount="10"/>   
        <Card name="Jquery"  postCount="1000"/>
      </div>
    </>
  )
}

export default CardList

.cardlist{
    max-width: 300px;
    padding: 16px;
    background: gainsboro;
    margin: 0 auto;
    border-radius: 16px;
}
.cardlist h2{
    text-align: center;
}

import React from 'react'
import './card.css'

const Card = (str) => {
  return (
    <div className='card'>
        <h3>{str.name}</h3>
        <p>Cantidad: {str.postCount}</p>
        <a href={str.linkUrl}>{str.linkName}</a>
    </div>
  )
}

export default Card

.card{
    margin: 20px;
    background: white;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.358);
    padding: 16px;
    border-radius: 10px;
}
.card a{
    background-color: crimson;
    color: white;
    text-decoration: none;
    font-weight: 600;
    padding: 8px 20px;
    border-radius: 10px;
}

Leido 7646 veces