From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../app/components/CardPaper/GeneralCard.js | 52 ++++++ .../app/components/CardPaper/IdentityCard.js | 70 ++++++++ .../app/components/CardPaper/NewsCard.js | 46 +++++ .../app/components/CardPaper/PlayerCard.js | 66 ++++++++ .../app/components/CardPaper/PostCard.js | 142 ++++++++++++++++ .../app/components/CardPaper/ProductCard.js | 134 +++++++++++++++ .../app/components/CardPaper/ProfileCard.js | 99 +++++++++++ .../app/components/CardPaper/VideoCard.js | 90 ++++++++++ .../app/components/CardPaper/cardStyle-jss.js | 188 +++++++++++++++++++++ 9 files changed, 887 insertions(+) create mode 100644 front/odiparpack/app/components/CardPaper/GeneralCard.js create mode 100644 front/odiparpack/app/components/CardPaper/IdentityCard.js create mode 100644 front/odiparpack/app/components/CardPaper/NewsCard.js create mode 100644 front/odiparpack/app/components/CardPaper/PlayerCard.js create mode 100644 front/odiparpack/app/components/CardPaper/PostCard.js create mode 100644 front/odiparpack/app/components/CardPaper/ProductCard.js create mode 100644 front/odiparpack/app/components/CardPaper/ProfileCard.js create mode 100644 front/odiparpack/app/components/CardPaper/VideoCard.js create mode 100644 front/odiparpack/app/components/CardPaper/cardStyle-jss.js (limited to 'front/odiparpack/app/components/CardPaper') diff --git a/front/odiparpack/app/components/CardPaper/GeneralCard.js b/front/odiparpack/app/components/CardPaper/GeneralCard.js new file mode 100644 index 0000000..85f7787 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/GeneralCard.js @@ -0,0 +1,52 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import Comment from '@material-ui/icons/Comment'; +import { Card, CardActions, CardContent, IconButton } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class GeneralCard extends React.Component { + render() { + const { + classes, + children, + liked, + shared, + commented + } = this.props; + return ( + + + {children} + + + + 0 && classes.liked} /> + {liked} + + + 0 && classes.shared} /> + {shared} + + + + {commented} + + + + ); + } +} + +GeneralCard.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + liked: PropTypes.number.isRequired, + shared: PropTypes.number.isRequired, + commented: PropTypes.number.isRequired, +}; + +export default withStyles(styles)(GeneralCard); diff --git a/front/odiparpack/app/components/CardPaper/IdentityCard.js b/front/odiparpack/app/components/CardPaper/IdentityCard.js new file mode 100644 index 0000000..4f4bd6c --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/IdentityCard.js @@ -0,0 +1,70 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import LocalPhone from '@material-ui/icons/LocalPhone'; +import LocationOn from '@material-ui/icons/LocationOn'; +import { + Card, Typography, CardContent, + ListItem, ListItemText, ListItemAvatar, + Avatar, Divider +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class IdentityCard extends React.Component { + render() { + const { + classes, + title, + name, + avatar, + phone, + address, + } = this.props; + return ( + + + {title} + + + + + + + + + + + + + + + + + + + + + + + + + + ); + } +} + +IdentityCard.propTypes = { + classes: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + phone: PropTypes.string.isRequired, + address: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(IdentityCard); diff --git a/front/odiparpack/app/components/CardPaper/NewsCard.js b/front/odiparpack/app/components/CardPaper/NewsCard.js new file mode 100644 index 0000000..f9994d8 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/NewsCard.js @@ -0,0 +1,46 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { Card, CardMedia, CardActions, CardContent, Button } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class NewsCard extends React.Component { + render() { + const { + classes, + children, + title, + image, + } = this.props; + return ( + + + + {children} + + + + + + + ); + } +} + +NewsCard.propTypes = { + classes: PropTypes.object.isRequired, + children: PropTypes.node.isRequired, + title: PropTypes.string.isRequired, + image: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(NewsCard); diff --git a/front/odiparpack/app/components/CardPaper/PlayerCard.js b/front/odiparpack/app/components/CardPaper/PlayerCard.js new file mode 100644 index 0000000..eabbb3a --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/PlayerCard.js @@ -0,0 +1,66 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import SkipPreviousIcon from '@material-ui/icons/SkipPrevious'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import SkipNextIcon from '@material-ui/icons/SkipNext'; +import { Typography, Card, CardMedia, CardContent, IconButton } from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class PlayerCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + theme, + title, + artist, + cover, + } = this.props; + + return ( + +
+ + {title} + + {artist} + + +
+ + {theme.direction === 'rtl' ? : } + + + + + + {theme.direction === 'rtl' ? : } + +
+
+ + + ); + } +} + +PlayerCard.propTypes = { + classes: PropTypes.object.isRequired, + theme: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + artist: PropTypes.string.isRequired, + cover: PropTypes.string.isRequired, +}; + +export default withStyles(styles, { withTheme: true })(PlayerCard); diff --git a/front/odiparpack/app/components/CardPaper/PostCard.js b/front/odiparpack/app/components/CardPaper/PostCard.js new file mode 100644 index 0000000..9c8f05b --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/PostCard.js @@ -0,0 +1,142 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import FavoriteIcon from '@material-ui/icons/Favorite'; +import ShareIcon from '@material-ui/icons/Share'; +import Comment from '@material-ui/icons/Comment'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { + Typography, + Card, + Menu, + MenuItem, + CardHeader, + CardMedia, + CardContent, + CardActions, + IconButton, + Avatar, +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +const optionsOpt = [ + 'Report this post', + 'Hide this post', + 'Copy link', +]; + +const ITEM_HEIGHT = 48; + +class PostCard extends React.Component { + state = { anchorElOpt: null }; + + handleClickOpt = event => { + this.setState({ anchorElOpt: event.currentTarget }); + }; + + handleCloseOpt = () => { + this.setState({ anchorElOpt: null }); + }; + + render() { + const { + classes, + avatar, + name, + date, + image, + content, + liked, + shared, + commented + } = this.props; + const { anchorElOpt } = this.state; + return ( + + + } + action={( + + + + )} + title={name} + subheader={date} + /> + + {optionsOpt.map(option => ( + + {option} + + ))} + + { image !== '' + && ( + + ) + } + + + {content} + + + + + 0 && classes.liked} /> + {liked} + + + 0 && classes.shared} /> + {shared} + + + + {commented} + + + + ); + } +} + +PostCard.propTypes = { + classes: PropTypes.object.isRequired, + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, + image: PropTypes.string, + content: PropTypes.string.isRequired, + liked: PropTypes.number.isRequired, + shared: PropTypes.number.isRequired, + commented: PropTypes.number.isRequired, +}; + +PostCard.defaultProps = { + image: '' +}; + +export default withStyles(styles)(PostCard); diff --git a/front/odiparpack/app/components/CardPaper/ProductCard.js b/front/odiparpack/app/components/CardPaper/ProductCard.js new file mode 100644 index 0000000..967e2fd --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/ProductCard.js @@ -0,0 +1,134 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import { isWidthUp } from '@material-ui/core/withWidth'; +import classNames from 'classnames'; +import AddShoppingCart from '@material-ui/icons/AddShoppingCart'; +import Type from 'ba-styles/Typography.scss'; +import { + Typography, + withWidth, + Card, + IconButton, + Tooltip, + CardMedia, + CardActions, + CardContent, + Chip, + Fab, + Button, +} from '@material-ui/core'; +import Rating from '../Rating/Rating'; +import styles from './cardStyle-jss'; + + +class ProductCard extends React.Component { + render() { + const { + classes, + discount, + soldout, + thumbnail, + name, + desc, + ratting, + price, + prevPrice, + list, + detailOpen, + addToCart, + width, + } = this.props; + return ( + +
+ {discount !== '' && ( + + )} + {soldout && ( + + )} +
+ + + {!soldout && ( + + + + + + )} + + {name} + + + {desc} + +
+ +
+ + + + +$ + {price} + + + {prevPrice > 0 && ( + + +$ + {prevPrice} + + + )} +
+ + {!soldout && ( + + + + + + )} +
+ + + ); + } +} + +ProductCard.propTypes = { + classes: PropTypes.object.isRequired, + discount: PropTypes.string, + width: PropTypes.string.isRequired, + soldout: PropTypes.bool, + thumbnail: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + desc: PropTypes.string.isRequired, + ratting: PropTypes.number.isRequired, + price: PropTypes.number.isRequired, + prevPrice: PropTypes.number, + list: PropTypes.bool, + detailOpen: PropTypes.func, + addToCart: PropTypes.func, +}; + +ProductCard.defaultProps = { + discount: '', + soldout: false, + prevPrice: 0, + list: false, + detailOpen: () => (false), + addToCart: () => (false), +}; + +const ProductCardResponsive = withWidth()(ProductCard); +export default withStyles(styles)(ProductCardResponsive); diff --git a/front/odiparpack/app/components/CardPaper/ProfileCard.js b/front/odiparpack/app/components/CardPaper/ProfileCard.js new file mode 100644 index 0000000..7827941 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/ProfileCard.js @@ -0,0 +1,99 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import Type from 'ba-styles/Typography.scss'; +import VerifiedUser from '@material-ui/icons/VerifiedUser'; +import SupervisorAccount from '@material-ui/icons/SupervisorAccount'; +import Favorite from '@material-ui/icons/Favorite'; +import PhotoLibrary from '@material-ui/icons/PhotoLibrary'; +import { + Typography, + Card, + CardMedia, + CardContent, + CardActions, + Button, + Avatar, + BottomNavigation, + BottomNavigationAction, + Divider, +} from '@material-ui/core'; +import styles from './cardStyle-jss'; + + +class ProfileCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + cover, + avatar, + name, + title, + connection, + isVerified, + btnText + } = this.props; + + return ( + + + + + + {name} + {isVerified && } + + + {title} + + + {connection} + {' '} +connection + + + + + + + } /> + } /> + } /> + + + + ); + } +} + +ProfileCard.propTypes = { + classes: PropTypes.object.isRequired, + cover: PropTypes.string.isRequired, + avatar: PropTypes.string.isRequired, + name: PropTypes.string.isRequired, + title: PropTypes.string.isRequired, + connection: PropTypes.number.isRequired, + btnText: PropTypes.string.isRequired, + isVerified: PropTypes.bool +}; + +ProfileCard.defaultProps = { + isVerified: false +}; + +export default withStyles(styles)(ProfileCard); diff --git a/front/odiparpack/app/components/CardPaper/VideoCard.js b/front/odiparpack/app/components/CardPaper/VideoCard.js new file mode 100644 index 0000000..69aa60c --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/VideoCard.js @@ -0,0 +1,90 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles } from '@material-ui/core/styles'; +import PlayArrowIcon from '@material-ui/icons/PlayArrow'; +import MoreVertIcon from '@material-ui/icons/MoreVert'; +import { red } from '@material-ui/core/colors'; + +import { Card, CardHeader, CardMedia, IconButton, Avatar } from '@material-ui/core'; + +const styles = theme => ({ + playIcon: { + height: 38, + width: 38, + }, + cardSocmed: { + maxWidth: 400, + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + position: 'relative', + }, + avatar: { + backgroundColor: red[500], + }, + playBtn: { + position: 'absolute', + top: '50%', + left: '50%', + width: 64, + height: 64, + transform: 'translate(-50%, -50%)', + '& svg': { + color: theme.palette.common.white, + fontSize: 64 + } + } +}); + +class VideoCard extends React.Component { + state = { expanded: false }; + + handleExpandClick = () => { + this.setState({ expanded: !this.state.expanded }); + }; + + render() { + const { + classes, + title, + cover, + date + } = this.props; + + return ( + + + + + + R + + )} + action={( + + + + )} + title={title} + subheader={date} + /> + + ); + } +} + +VideoCard.propTypes = { + classes: PropTypes.object.isRequired, + title: PropTypes.string.isRequired, + cover: PropTypes.string.isRequired, + date: PropTypes.string.isRequired, +}; + +export default withStyles(styles)(VideoCard); diff --git a/front/odiparpack/app/components/CardPaper/cardStyle-jss.js b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js new file mode 100644 index 0000000..df367a0 --- /dev/null +++ b/front/odiparpack/app/components/CardPaper/cardStyle-jss.js @@ -0,0 +1,188 @@ +import { pink, lightGreen, blueGrey as dark } from '@material-ui/core/colors'; + +const styles = theme => ({ + divider: { + margin: `${theme.spacing(3)}px 0` + }, + card: { + minWidth: 275, + }, + liked: { + color: pink[500] + }, + shared: { + color: lightGreen[500] + }, + num: { + fontSize: 14, + marginLeft: 5 + }, + rightIcon: { + marginLeft: 'auto', + display: 'flex', + alignItems: 'center' + }, + button: { + marginRight: theme.spacing(1) + }, + media: { + height: 0, + paddingTop: '56.25%', // 16:9 + }, + cardPlayer: { + display: 'flex', + justifyContent: 'space-between' + }, + details: { + display: 'flex', + flexDirection: 'column', + }, + content: { + flex: '1 0 auto', + }, + cover: { + width: 150, + height: 150, + }, + controls: { + display: 'flex', + alignItems: 'center', + paddingLeft: theme.spacing(1), + paddingBottom: theme.spacing(1), + }, + playIcon: { + height: 38, + width: 38, + }, + cardSocmed: { + minWidth: 275, + }, + cardProduct: { + position: 'relative' + }, + mediaProduct: { + height: 0, + paddingTop: '60.25%', // 16:9 + }, + rightAction: { + '&:not(:first-child)': { + marginLeft: 'auto', + display: 'flex', + alignItems: 'center' + } + }, + floatingButtonWrap: { + position: 'relative', + paddingTop: 50 + }, + buttonAdd: { + position: 'absolute', + right: 20, + top: -20, + }, + buttonAddList: { + display: 'none', + marginLeft: 10 + }, + title: { + fontSize: 20, + height: 30, + }, + ratting: { + margin: '10px 0', + '& button': { + width: 24, + height: 24 + } + }, + status: { + position: 'absolute', + right: 0, + top: 0, + padding: 10, + '& > *': { + margin: 5 + } + }, + desc: { + height: 45, + overflow: 'hidden' + }, + chipDiscount: { + background: theme.palette.primary.light, + color: theme.palette.primary.dark, + }, + chipSold: { + background: dark[500], + color: theme.palette.getContrastText(dark[500]), + }, + contentProfle: { + flex: '1 0 auto', + textAlign: 'center' + }, + mediaProfile: { + height: 0, + paddingTop: '36.25%', // 16:9 + }, + actions: { + display: 'flex', + }, + avatarBig: { + width: 80, + height: 80, + margin: '-56px auto 10px', + background: theme.palette.secondary.dark + }, + name: { + display: 'flex', + justifyContent: 'center', + alignItems: 'center' + }, + buttonProfile: { + margin: 20 + }, + bottomLink: { + width: '100%', + }, + price: { + padding: theme.spacing(2), + paddingBottom: 20 + }, + contentProfile: { + textAlign: 'center' + }, + verified: { + fontSize: 16, + color: theme.palette.primary.main + }, + cardList: { + display: 'flex', + justifyContent: 'space-between', + '& $buttonAddList': { + display: 'inline-block' + }, + '& $floatingButtonWrap': { + flex: 1, + }, + '& $buttonAdd': { + display: 'none' + }, + '& $status': { + right: 'auto', + left: 0, + }, + '& $mediaProduct': { + width: 300, + paddingTop: '21.25%' + }, + '& $price': { + flexDirection: 'column', + justifyContent: 'center', + '& button': { + marginTop: 20 + } + } + }, +}); + +export default styles; -- cgit v1.2.3