Add Card Img

Co-Authored-By: Nanci Lizbeth García Martínez <[email protected]>
Co-Authored-By: Jordi Alejandro García Núñez <[email protected]>

recetario/App.js

@@ -16,7 +16,9 @@ import {
   StatusBar,
 } from 'react-native';
 import SearchInput from './components/searchbar';
-import Horizontal from './components/HorizontalList';
+// import Horizontal from './components/HorizontalList';
+import CardM from './components/CardM';
+
 
 import {
   Header,
@@ -33,12 +35,12 @@ const App: () => React$Node = () => {
     {
       id: '1',
       title: 'First Item',
-      imag: './images/discada.jpeg'
+      imag: '/images/discada.jpg'
     },
     {
       id: '2',
       title: 'Second Item',
-      imag: './images/verdes.jpeg'
+      imag: '/images/verdes.jpeg'
     },
 
   ];
@@ -47,12 +49,12 @@ const App: () => React$Node = () => {
     {
       id: '3',
       title: 'Elemento 1',
-      imag: './images/mole.jpeg'
+      imag: '/images/mole.jpeg'
     },
     {
       id: '4',
       title: 'Elemento 2',
-      imag: './images/tlayuda.jpeg'
+      imag: '/images/tlayuda.jpeg'
     },
 
   ];
@@ -64,14 +66,19 @@ const App: () => React$Node = () => {
       <SafeAreaView>
         <View style={styles.searchInputStyle}>
           <SearchInput />
+          <CardM
+            className={classes.media}
+            image="/images/discada.jpg"
+            title="Paella dish"
+          />
         </View>
 
         <View style={styles.searchInputStyle}>
-          <Horizontal datos={DATA2} />
+          {/* <Horizontal datos={DATA2} /> */}
         </View>
 
         <View style={styles.searchInputStyle}>
-          <Horizontal datos={DATA1} />
+          {/* <Horizontal datos={DATA1} /> */}
         </View>
 
         <View style={styles.searchInputStyle}>

recetario/components/CardM.js

@@ -0,0 +1,125 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import clsx from 'clsx';
+import Card from '@material-ui/core/Card';
+import CardHeader from '@material-ui/core/CardHeader';
+import CardMedia from '@material-ui/core/CardMedia';
+import CardContent from '@material-ui/core/CardContent';
+import CardActions from '@material-ui/core/CardActions';
+import Collapse from '@material-ui/core/Collapse';
+import Avatar from '@material-ui/core/Avatar';
+import IconButton from '@material-ui/core/IconButton';
+import Typography from '@material-ui/core/Typography';
+import { red } from '@material-ui/core/colors';
+import FavoriteIcon from '@material-ui/icons/Favorite';
+import ShareIcon from '@material-ui/icons/Share';
+import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
+import MoreVertIcon from '@material-ui/icons/MoreVert';
+import ReactDOM from 'react-dom';
+
+const useStyles = makeStyles((theme) => ({
+  root: {
+    maxWidth: 345,
+  },
+  media: {
+    height: 0,
+    paddingTop: '56.25%', // 16:9
+  },
+  expand: {
+    transform: 'rotate(0deg)',
+    marginLeft: 'auto',
+    transition: theme.transitions.create('transform', {
+      duration: theme.transitions.duration.shortest,
+    }),
+  },
+  expandOpen: {
+    transform: 'rotate(180deg)',
+  },
+  avatar: {
+    backgroundColor: red[500],
+  },
+}));
+
+export default function CardM() {
+  const classes = useStyles();
+  const [expanded, setExpanded] = React.useState(false);
+
+  const handleExpandClick = () => {
+    setExpanded(!expanded);
+  };
+
+  return (
+    <Card className={classes.root}>
+      <CardHeader
+        avatar={
+          <Avatar aria-label="recipe" className={classes.avatar}>
+            R
+          </Avatar>
+        }
+        action={
+          <IconButton aria-label="settings">
+            <MoreVertIcon />
+          </IconButton>
+        }
+        title="Shrimp and Chorizo Paella"
+        subheader="September 14, 2016"
+      />
+      <CardMedia
+        className={classes.media}
+        image="/static/images/cards/paella.jpg"
+        title="Paella dish"
+      />
+      <CardContent>
+        <Typography variant="body2" color="textSecondary" component="p">
+          This impressive paella is a perfect party dish and a fun meal to cook together with your
+          guests. Add 1 cup of frozen peas along with the mussels, if you like.
+        </Typography>
+      </CardContent>
+      <CardActions disableSpacing>
+        <IconButton aria-label="add to favorites">
+          <FavoriteIcon />
+        </IconButton>
+        <IconButton aria-label="share">
+          <ShareIcon />
+        </IconButton>
+        <IconButton
+          className={clsx(classes.expand, {
+            [classes.expandOpen]: expanded,
+          })}
+          onClick={handleExpandClick}
+          aria-expanded={expanded}
+          aria-label="show more"
+        >
+          <ExpandMoreIcon />
+        </IconButton>
+      </CardActions>
+      <Collapse in={expanded} timeout="auto" unmountOnExit>
+        <CardContent>
+          <Typography paragraph>Method:</Typography>
+          <Typography paragraph>
+            Heat 1/2 cup of the broth in a pot until simmering, add saffron and set aside for 10
+            minutes.
+          </Typography>
+          <Typography paragraph>
+            Heat oil in a (14- to 16-inch) paella pan or a large, deep skillet over medium-high
+            heat. Add chicken, shrimp and chorizo, and cook, stirring occasionally until lightly
+            browned, 6 to 8 minutes. Transfer shrimp to a large plate and set aside, leaving chicken
+            and chorizo in the pan. Add pimentón, bay leaves, garlic, tomatoes, onion, salt and
+            pepper, and cook, stirring often until thickened and fragrant, about 10 minutes. Add
+            saffron broth and remaining 4 1/2 cups chicken broth; bring to a boil.
+          </Typography>
+          <Typography paragraph>
+            Add rice and stir very gently to distribute. Top with artichokes and peppers, and cook
+            without stirring, until most of the liquid is absorbed, 15 to 18 minutes. Reduce heat to
+            medium-low, add reserved shrimp and mussels, tucking them down into the rice, and cook
+            again without stirring, until mussels have opened and rice is just tender, 5 to 7
+            minutes more. (Discard any mussels that don’t open.)
+          </Typography>
+          <Typography>
+            Set aside off of the heat to let rest for 10 minutes, and then serve.
+          </Typography>
+        </CardContent>
+      </Collapse>
+    </Card>
+  );
+}

recetario/components/HorizontalList.js

@@ -1,14 +1,17 @@
 import React from 'react';
+// import CardM from './components/CardM';
 import { SafeAreaView, View, FlatList, StyleSheet, Text, StatusBar, ScrollView, Image } from 'react-native';
 
 
 
 const Item = ({ title,imag }) => (
   <View style={styles.item}>
     <Text style={styles.title}>{title}</Text>
-    {/* <Image
-        style={styles.tinyLogo}
-        source={imag}
+
+      {/* <CardM
+        className={classes.media}
+        image="/images/discada.jpg"
+        title="Paella dish"
       /> */}
   </View>
 );
@@ -17,7 +20,7 @@ const Horizontal = (props) => {
   const renderItem = ({ item }) => (
     <Item 
     title={item.title}
-    //imag={item.imag}
+    // imag={item.imag}
      />
   );