From 84e8c327ae64f83cae07aba8e1fb998d4e9d81ce Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Thu, 21 Dec 2023 22:52:05 +0100 Subject: [PATCH 1/6] task 1 done --- 01/Task01.js | 3 ++- src/components/Alert/Alert.js | 10 +++++++--- src/components/Alert/Alert.styled.js | 11 ++++++++++- 3 files changed, 19 insertions(+), 5 deletions(-) diff --git a/01/Task01.js b/01/Task01.js index c12ef98b..321626c8 100644 --- a/01/Task01.js +++ b/01/Task01.js @@ -10,7 +10,8 @@ const Task01 = () => { Uwaga! Styled Components nadchodzi! - Uwaga! Styled Components nadchodzi! + Uwaga! Styled Components nadchodzi! + Uwaga! Styled Components nadchodzi! ) diff --git a/src/components/Alert/Alert.js b/src/components/Alert/Alert.js index 1b5f521c..e78de2f7 100644 --- a/src/components/Alert/Alert.js +++ b/src/components/Alert/Alert.js @@ -1,10 +1,14 @@ import React from 'react'; - import { StyledAlert } from './Alert.styled'; +import { ThemeProvider } from 'styled-components'; -const Alert = props => { +const Alert = ({children, variant}) => { + const theme = variant === 'primary' ? { colorAlfa: '#113f67' } : { colorAlfa: '#a2a8d3' }; return ( - {props.children} + + {children} + + ); } diff --git a/src/components/Alert/Alert.styled.js b/src/components/Alert/Alert.styled.js index 117843d9..1a10156c 100644 --- a/src/components/Alert/Alert.styled.js +++ b/src/components/Alert/Alert.styled.js @@ -2,6 +2,15 @@ import styled from 'styled-components'; const StyledAlert = styled.div` display: block; + padding: 12px 20px; + margin: 0 0 10px; + --color-alfa: ${ props => props.theme.colorAlfa}; + color: var(--color-alfa); + border-radius: 5px; + background-color: ${ + props => props.variant === 'primary' + ? '#5585b5' : '#bbe4e9' + }; ` -export { StyledAlert }; \ No newline at end of file +export { StyledAlert }; From d2cfe502396034f7842a1bbf7821a4663e6d66c1 Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Sat, 23 Dec 2023 09:51:07 +0100 Subject: [PATCH 2/6] task 2 done --- 02/Task02.js | 3 +- src/components/Button/Button.js | 16 +++++ src/components/Button/Button.styled.js | 97 ++++++++++++++++++++++++++ src/components/Button/index.js | 3 + 4 files changed, 118 insertions(+), 1 deletion(-) diff --git a/02/Task02.js b/02/Task02.js index 0894136e..6f562fee 100644 --- a/02/Task02.js +++ b/02/Task02.js @@ -10,7 +10,8 @@ const Task02 = () => { Button! - Button! + + ) diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index e69de29b..7c620db0 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -0,0 +1,16 @@ +import React, { useState } from "react"; + +import { StyledButton, theme } from "./Button.styled"; +import { ThemeProvider } from "styled-components"; + +const Button = ({children, variant, size, disabled}) => { + const [isActive, setIsActive] = useState(false); + + return ( + + setIsActive(true)} variant={ variant } size={ size } disabled={ disabled } active={ isActive }>{children} + + ) +} + +export default Button; \ No newline at end of file diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index e69de29b..43c62a1c 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -0,0 +1,97 @@ +import styled, {css} from "styled-components"; + + + +const theme = { + button: { + primary: { + backgroundColor: '#0069D9', + color: '#fff', + hoverBackgroundColor: '#0022D9', + activeBackgroundColor: '#0022D9', + activeBorder: '5px solid #0069D9' + }, + secondary: { + backgroundColor: '#5585b5', + color: '#fff', + hoverBackgroundColor: '#5055c5', + activeBackgroundColor: '#5055c5', + activeBorder: '5px solid #5585b5' + }, + sizes: { + lg: { + padding: '10px 20px', + fontSize: '20px', + }, + sm: { + padding: '5px 10px', + fontSize: '16px', + }, + }, + }, +}; + +const StyledButton = styled.button` + border-radius: 10px; + border: 5px solid transparent; + margin: 0 5px; + &:disabled { + opacity: 0.5; + pointer-events: none; + } + &:focus { + outline: none; + } + transition: 200ms; + ${({ theme, variant }) => + variant === 'primary' && + css` + background-color: ${theme.button.primary.backgroundColor}; + color: ${theme.button.primary.color}; + &:hover { + background-color: ${theme.button.primary.hoverBackgroundColor}; + } + `} + ${({ theme, variant, active }) => + variant === 'primary' && active && + css` + &:focus { + background-color: ${theme.button.primary.activeBackgroundColor}; + border: ${theme.button.primary.activeBorder}; + } + `} + ${({ theme, variant }) => + variant === 'secondary' && + css` + background-color: ${theme.button.secondary.backgroundColor}; + color: ${theme.button.secondary.color}; + &:hover { + background-color: ${theme.button.secondary.hoverBackgroundColor}; + } + `} + ${({ theme, variant, active }) => + variant === 'secondary' && active && + css` + &:focus { + background-color: ${theme.button.secondary.activeBackgroundColor}; + border: ${theme.button.secondary.activeBorder}; + } + `} + + ${({ theme, size }) => + size === 'lg' && + css` + padding: ${theme.button.sizes.lg.padding}; + font-size: ${theme.button.sizes.lg.fontSize}; + `} + + ${({ theme, size }) => + size === 'sm' && + css` + padding: ${theme.button.sizes.sm.padding}; + font-size: ${theme.button.sizes.sm.fontSize}; + `} + } +`; + +export { StyledButton, theme } \ No newline at end of file diff --git a/src/components/Button/index.js b/src/components/Button/index.js index e69de29b..cc97c534 100644 --- a/src/components/Button/index.js +++ b/src/components/Button/index.js @@ -0,0 +1,3 @@ +import Button from "./Button"; + +export default Button; \ No newline at end of file From 40a7a73c22129673ff73e650fa9ae9e2a640b667 Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Sat, 23 Dec 2023 11:49:52 +0100 Subject: [PATCH 3/6] fixed task 2 --- 03/Task03.js | 3 +-- src/components/Button/Button.js | 4 ++-- src/components/Button/Button.styled.js | 19 ++++++++++--------- 3 files changed, 13 insertions(+), 13 deletions(-) diff --git a/03/Task03.js b/03/Task03.js index 6c884d18..7e5b19aa 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,5 +1,4 @@ import React from 'react'; - import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; const Task03 = () => { @@ -15,7 +14,7 @@ const Task03 = () => { - Breadcrumb! + Breadcrumb! ) diff --git a/src/components/Button/Button.js b/src/components/Button/Button.js index 7c620db0..b6e16e7e 100644 --- a/src/components/Button/Button.js +++ b/src/components/Button/Button.js @@ -3,12 +3,12 @@ import React, { useState } from "react"; import { StyledButton, theme } from "./Button.styled"; import { ThemeProvider } from "styled-components"; -const Button = ({children, variant, size, disabled}) => { +const Button = ({children, variant, size, disabled, active}) => { const [isActive, setIsActive] = useState(false); return ( - setIsActive(true)} variant={ variant } size={ size } disabled={ disabled } active={ isActive }>{children} + setIsActive(true)} variant={ variant } size={ size } disabled={ disabled } active={ active }>{children} ) } diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 43c62a1c..952fa53b 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -9,22 +9,22 @@ const theme = { color: '#fff', hoverBackgroundColor: '#0022D9', activeBackgroundColor: '#0022D9', - activeBorder: '5px solid #0069D9' + activeOutline: '3px solid #0099D9', }, secondary: { backgroundColor: '#5585b5', color: '#fff', hoverBackgroundColor: '#5055c5', activeBackgroundColor: '#5055c5', - activeBorder: '5px solid #5585b5' + activeOutline: '3px solid #5585b5' }, sizes: { lg: { - padding: '10px 20px', + padding: '8px 16px', fontSize: '20px', }, sm: { - padding: '5px 10px', + padding: '6px 10px', fontSize: '16px', }, }, @@ -32,8 +32,8 @@ const theme = { }; const StyledButton = styled.button` - border-radius: 10px; - border: 5px solid transparent; + border-radius: 5px; + border: 3px solid transparent; margin: 0 5px; &:disabled { opacity: 0.5; @@ -42,7 +42,6 @@ const StyledButton = styled.button` &:focus { outline: none; } - transition: 200ms; ${({ theme, variant }) => variant === 'primary' && css` @@ -50,6 +49,7 @@ const StyledButton = styled.button` color: ${theme.button.primary.color}; &:hover { background-color: ${theme.button.primary.hoverBackgroundColor}; + transition: 300ms; } `} ${({ theme, variant, active }) => @@ -57,7 +57,8 @@ const StyledButton = styled.button` css` &:focus { background-color: ${theme.button.primary.activeBackgroundColor}; - border: ${theme.button.primary.activeBorder}; + outline: ${theme.button.primary.activeOutline}; + transition: 100ms; } `} ${({ theme, variant }) => @@ -74,7 +75,7 @@ const StyledButton = styled.button` css` &:focus { background-color: ${theme.button.secondary.activeBackgroundColor}; - border: ${theme.button.secondary.activeBorder}; + outline: ${theme.button.secondary.activeOutline}; } `} From 67336fc50421612ae1ce4e8d96797bf7c3c265f4 Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Sat, 23 Dec 2023 12:46:45 +0100 Subject: [PATCH 4/6] task 3 done --- 03/Task03.js | 9 +++++++-- src/components/Breadcrumb/BreadcrumbItem.js | 10 ++++++++++ .../Breadcrumb/BreadcrumbItem.styled.js | 20 +++++++++++++++++++ 3 files changed, 37 insertions(+), 2 deletions(-) create mode 100644 src/components/Breadcrumb/BreadcrumbItem.js create mode 100644 src/components/Breadcrumb/BreadcrumbItem.styled.js diff --git a/03/Task03.js b/03/Task03.js index 7e5b19aa..e6c3b07b 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,5 +1,6 @@ import React from 'react'; -import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; +import BreadcrumbItem from '../src/components/Breadcrumb/BreadcrumbItem'; +import { Row, Col, Breadcrumb as RBBreadcrumb, Breadcrumb } from 'react-bootstrap'; const Task03 = () => { return ( @@ -14,7 +15,11 @@ const Task03 = () => { - Breadcrumb! + + Home + Library + Data + ) diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js new file mode 100644 index 00000000..fedd7a3c --- /dev/null +++ b/src/components/Breadcrumb/BreadcrumbItem.js @@ -0,0 +1,10 @@ +import React from "react"; +import { StyledBreadItem } from "./BreadcrumbItem.styled"; + +const BreadcrumbItem = ({children, href, active}) => { + return ( + {children} + ) +} + +export default BreadcrumbItem; \ No newline at end of file diff --git a/src/components/Breadcrumb/BreadcrumbItem.styled.js b/src/components/Breadcrumb/BreadcrumbItem.styled.js new file mode 100644 index 00000000..36534986 --- /dev/null +++ b/src/components/Breadcrumb/BreadcrumbItem.styled.js @@ -0,0 +1,20 @@ +import styled from "styled-components"; + +const StyledBreadItem = styled.li` + &:nth-child(1) { + &:before { + content: none; + } + } + &:before { + content: "/"; + padding: 10px; + color: grey; + } + ${({ active }) => + active && + `color: grey; + `} +`; + +export { StyledBreadItem }; From 12945eb8dfd535d4a6988c2ed09bc866205d5a64 Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Tue, 26 Dec 2023 10:57:35 +0100 Subject: [PATCH 5/6] task 4 done --- 04/Task04.js | 67 +++++++++++++++++--------- src/components/Button/Button.styled.js | 2 +- src/components/Tab/Tab.js | 25 ++++++++++ src/components/Tab/Tab.styled.js | 17 +++++++ src/components/Tab/index.js | 3 ++ src/components/Tabs/Tabs.js | 19 ++++++++ src/components/Tabs/Tabs.styled.js | 11 +++++ src/components/Tabs/index.js | 3 ++ 8 files changed, 123 insertions(+), 24 deletions(-) create mode 100644 src/components/Tab/Tab.js create mode 100644 src/components/Tab/Tab.styled.js create mode 100644 src/components/Tab/index.js create mode 100644 src/components/Tabs/Tabs.js create mode 100644 src/components/Tabs/Tabs.styled.js create mode 100644 src/components/Tabs/index.js diff --git a/04/Task04.js b/04/Task04.js index 8a8e5b21..0eea273b 100644 --- a/04/Task04.js +++ b/04/Task04.js @@ -1,29 +1,50 @@ import React from 'react'; - -import { Row, Col, Tabs as RBTabs, Tab as RBTab, } from 'react-bootstrap'; +import Tabs from "./../src/components/Tabs"; +import Tab from "./../src/components/Tab"; +import { Row, Col, Tabs as RBTabs, Tab as RBTab } from "react-bootstrap"; const Task04 = () => { - return ( - - - - -

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

- - -

Donec dignissim ultricies felis, eu dictum eros congue in. In gravida lobortis libero nec tempus. Cras rutrum nisl ut leo volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, tincidunt eu lacus.

- - -

Vivamus metus nulla, fermentum eget placerat vitae, mollis interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, suscipit non orci. Integer justo odio, suscipit eget tortor nec, molestie lobortis eros. Nullam commodo elit sit amet lacus blandit aliquet. Mauris at nibh eget nisl pulvinar dignissim.

- - - - - Tabs! - - - ) -} + return ( + + + + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur + condimentum lacus nec ligula faucibus rhoncus. Vestibulum ante + ipsum primis in faucibus orci luctus et ultrices posuere cubilia + Curae;{" "} +

+ + +

+ Donec dignissim ultricies felis, eu dictum eros congue in. In + gravida lobortis libero nec tempus. Cras rutrum nisl ut leo + volutpat rhoncus. Nulla massa nulla, viverra hendrerit laoreet at, + tincidunt eu lacus. +

+ + +

+ Vivamus metus nulla, fermentum eget placerat vitae, mollis + interdum elit. Pellentesque arcu augue, vulputate ut porttitor ut, + suscipit non orci. Integer justo odio, suscipit eget tortor nec, + molestie lobortis eros. Nullam commodo elit sit amet lacus blandit + aliquet. Mauris at nibh eget nisl pulvinar dignissim. +

+ + + + + +

Home home

 +

Profile profile

 +

Contact contact

 + + + + ); +}; export default Task04; diff --git a/src/components/Button/Button.styled.js b/src/components/Button/Button.styled.js index 952fa53b..2ce4f278 100644 --- a/src/components/Button/Button.styled.js +++ b/src/components/Button/Button.styled.js @@ -34,7 +34,7 @@ const theme = { const StyledButton = styled.button` border-radius: 5px; border: 3px solid transparent; - margin: 0 5px; + margin: 10px 5px; &:disabled { opacity: 0.5; pointer-events: none; diff --git a/src/components/Tab/Tab.js b/src/components/Tab/Tab.js new file mode 100644 index 00000000..2e8b8394 --- /dev/null +++ b/src/components/Tab/Tab.js @@ -0,0 +1,25 @@ +import React from "react"; +import { StyledTab } from "./Tab.styled"; +const Tab = ({ title, disabled, children, isActive, onTabClick, eventKey }) => { + const handleClick = () => { + if (!disabled) { + onTabClick(eventKey); + } + }; + return ( + <> + + {title} +
{isActive && children}
+ + + ); +}; + +export default Tab; diff --git a/src/components/Tab/Tab.styled.js b/src/components/Tab/Tab.styled.js new file mode 100644 index 00000000..f7c142fd --- /dev/null +++ b/src/components/Tab/Tab.styled.js @@ -0,0 +1,17 @@ +import styled from "styled-components"; + + +const StyledTab = styled.a` + padding: 8px 10px; + color: grey; + &:hover { + text-decoration: none; + color: grey; + } + &:nth-child(1) { + color: #007bff; + } +`; + + +export {StyledTab} \ No newline at end of file diff --git a/src/components/Tab/index.js b/src/components/Tab/index.js new file mode 100644 index 00000000..dfcbef61 --- /dev/null +++ b/src/components/Tab/index.js @@ -0,0 +1,3 @@ +import Tab from './Tab' + +export default Tab; \ No newline at end of file diff --git a/src/components/Tabs/Tabs.js b/src/components/Tabs/Tabs.js new file mode 100644 index 00000000..1e9608d9 --- /dev/null +++ b/src/components/Tabs/Tabs.js @@ -0,0 +1,19 @@ +import React, { useState } from "react"; +import { StyledTabs } from "./Tabs.styled"; +const Tabs = ({ children }) => { +const [activeKey, setActiveKey] = useState('profile'); +const handleTabClick = (key) => { + setActiveKey(key); + }; + return ( + {React.Children.map(children, (child) => + React.cloneElement(child, { + isActive: child.props.eventKey === activeKey, + onTabClick: handleTabClick, + }) + )} + ); +}; + +export default Tabs; + \ No newline at end of file diff --git a/src/components/Tabs/Tabs.styled.js b/src/components/Tabs/Tabs.styled.js new file mode 100644 index 00000000..1cb8a05b --- /dev/null +++ b/src/components/Tabs/Tabs.styled.js @@ -0,0 +1,11 @@ +import styled from "styled-components"; + + + +const StyledTabs = styled.nav` + padding: 0 10px; + display: flex; +`; + + +export {StyledTabs} \ No newline at end of file diff --git a/src/components/Tabs/index.js b/src/components/Tabs/index.js new file mode 100644 index 00000000..3d492e40 --- /dev/null +++ b/src/components/Tabs/index.js @@ -0,0 +1,3 @@ +import Tabs from "./Tabs"; + +export default Tabs; \ No newline at end of file From 89b1406e27fff586758a92e333ca1950e81ef78d Mon Sep 17 00:00:00 2001 From: Fryderyk Jellinek Date: Tue, 26 Dec 2023 23:10:03 +0100 Subject: [PATCH 6/6] task 5 done --- 03/Task03.js | 10 ++-- 05/Task05.js | 57 ++++++++++++------- src/components/Breadcrumb/Breadcrumb.js | 13 +++++ src/components/Breadcrumb/BreadcrumbItem.js | 4 +- .../Breadcrumb/BreadcrumbItem.styled.js | 1 + src/components/Card/Card.js | 18 ++++++ src/components/Card/CardBody.js | 10 ++++ src/components/Card/CardImg.js | 9 +++ src/components/Card/CardText.js | 10 ++++ src/components/Card/CardTitle.js | 9 +++ 10 files changed, 112 insertions(+), 29 deletions(-) create mode 100644 src/components/Breadcrumb/Breadcrumb.js create mode 100644 src/components/Card/Card.js create mode 100644 src/components/Card/CardBody.js create mode 100644 src/components/Card/CardImg.js create mode 100644 src/components/Card/CardText.js create mode 100644 src/components/Card/CardTitle.js diff --git a/03/Task03.js b/03/Task03.js index e6c3b07b..236030ff 100644 --- a/03/Task03.js +++ b/03/Task03.js @@ -1,6 +1,6 @@ import React from 'react'; -import BreadcrumbItem from '../src/components/Breadcrumb/BreadcrumbItem'; -import { Row, Col, Breadcrumb as RBBreadcrumb, Breadcrumb } from 'react-bootstrap'; +import Breadcrumb from '../src/components/Breadcrumb/Breadcrumb'; +import { Row, Col, Breadcrumb as RBBreadcrumb } from 'react-bootstrap'; const Task03 = () => { return ( @@ -16,9 +16,9 @@ const Task03 = () => { - Home - Library - Data + Home + Library + Data diff --git a/05/Task05.js b/05/Task05.js index 6cebfeda..2def21e9 100644 --- a/05/Task05.js +++ b/05/Task05.js @@ -1,29 +1,42 @@ import React from 'react'; +import Card from "../src/components/Card/Card"; +import Button from '../src/components/Button/Button'; -import { Row, Col, Card as RBCard, Button as RBButton } from 'react-bootstrap'; +import { Row, Col, Card as RBCard, Button as RBButton } from "react-bootstrap"; const Task05 = () => { - return ( - - - - - - Card Title - - Some quick example text to build on the card title and make up the bulk of - the card's content. - - Go somewhere - - - - - Card! - - - ) -} + return ( + + + + + + Card Title + + Some quick example text to build on the card title and make up the + bulk of the card's content. + + Go somewhere + + + + + + + + Card Title + + {" "} + Some quick example text to build on the card title and make up the + bulk of the card's content. + + + + + + + ); +}; export default Task05; diff --git a/src/components/Breadcrumb/Breadcrumb.js b/src/components/Breadcrumb/Breadcrumb.js new file mode 100644 index 00000000..4fe514bb --- /dev/null +++ b/src/components/Breadcrumb/Breadcrumb.js @@ -0,0 +1,13 @@ +import React from "react"; +import BreadcrumbItem from "./BreadcrumbItem"; + +const Breadcrumb = ({children}) => { + const style = {display: 'flex'} + return ( + + ) +} + +Breadcrumb.Item = BreadcrumbItem; + +export default Breadcrumb; \ No newline at end of file diff --git a/src/components/Breadcrumb/BreadcrumbItem.js b/src/components/Breadcrumb/BreadcrumbItem.js index fedd7a3c..00b1b65b 100644 --- a/src/components/Breadcrumb/BreadcrumbItem.js +++ b/src/components/Breadcrumb/BreadcrumbItem.js @@ -3,8 +3,8 @@ import { StyledBreadItem } from "./BreadcrumbItem.styled"; const BreadcrumbItem = ({children, href, active}) => { return ( - {children} + {children} ) } -export default BreadcrumbItem; \ No newline at end of file + export default BreadcrumbItem; \ No newline at end of file diff --git a/src/components/Breadcrumb/BreadcrumbItem.styled.js b/src/components/Breadcrumb/BreadcrumbItem.styled.js index 36534986..d7868031 100644 --- a/src/components/Breadcrumb/BreadcrumbItem.styled.js +++ b/src/components/Breadcrumb/BreadcrumbItem.styled.js @@ -1,6 +1,7 @@ import styled from "styled-components"; const StyledBreadItem = styled.li` +list-style-type: none; &:nth-child(1) { &:before { content: none; diff --git a/src/components/Card/Card.js b/src/components/Card/Card.js new file mode 100644 index 00000000..eb2a78e4 --- /dev/null +++ b/src/components/Card/Card.js @@ -0,0 +1,18 @@ +import React from "react"; +import CardImg from './CardImg'; +import CardBody from './CardBody' +import CardTitle from "./CardTitle"; +import CardText from "./CardText"; + +const Card = ({children}) => { + return ( +
{children}
+ ) +} + +Card.Img = CardImg; +Card.Body = CardBody; +Card.Title = CardTitle; +Card.Text = CardText; + +export default Card; \ No newline at end of file diff --git a/src/components/Card/CardBody.js b/src/components/Card/CardBody.js new file mode 100644 index 00000000..49364136 --- /dev/null +++ b/src/components/Card/CardBody.js @@ -0,0 +1,10 @@ +import React from "react"; + + +const CardBody = ({children}) => { + return ( +
{children}
+ ) +} + +export default CardBody; \ No newline at end of file diff --git a/src/components/Card/CardImg.js b/src/components/Card/CardImg.js new file mode 100644 index 00000000..61554f00 --- /dev/null +++ b/src/components/Card/CardImg.js @@ -0,0 +1,9 @@ +import React from "react"; + +const CardImg = ( {src} ) => { + return ( + + ) +} + +export default CardImg; \ No newline at end of file diff --git a/src/components/Card/CardText.js b/src/components/Card/CardText.js new file mode 100644 index 00000000..80e8e79e --- /dev/null +++ b/src/components/Card/CardText.js @@ -0,0 +1,10 @@ +import React from "react"; + + +const CardText = ({children}) => { + return ( +

{children}

+ ) +} + +export default CardText; \ No newline at end of file diff --git a/src/components/Card/CardTitle.js b/src/components/Card/CardTitle.js new file mode 100644 index 00000000..5a7771d3 --- /dev/null +++ b/src/components/Card/CardTitle.js @@ -0,0 +1,9 @@ +import React from "react"; + +const CardTitle = ({children}) => { + return ( +
{children}
+ ) +} + +export default CardTitle; \ No newline at end of file