Skip to content
This repository has been archived by the owner on Oct 21, 2020. It is now read-only.

media prettier #39

Merged
merged 1 commit into from
Aug 13, 2019
+88 −105
Merged

media prettier #39

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "zapify-ui",
"version": "0.2.0",
"version": "0.2.2",
"private": false,
"author": "piyush97 <[email protected]>",
"main": "lib/index/index.js",
Expand Down
160 changes: 75 additions & 85 deletions src/components/Media/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,98 +7,88 @@
import React, { Component } from "react";
import Proptypes from "prop-types";
import "./Media.css";
function Media(props) {
const {typeGet, image} = props;
const content = props.children;
return (
<div>
{/* {
function Media(props) {
const { typeGet, image } = props;
const content = props.children;
return (
<div>
{/* {
(typeGet === "linear") ?
<Linear value={typeGet} content={content}/> :
<Nested value={typeGet} content={content}/>
} */}
<Rendering typeGet={typeGet} content={content} image={image}/>
</div>
)
}

function Rendering({typeGet, content, image}) {
if(typeGet === "linear"){
return <Linear value={typeGet} content={content} image={image}/>
} else if(typeGet === "nested") {
return <Nested value={typeGet} content={content} image={image}/>
} else {
console.log("props error")
}
}


const Linear = ({props, content, image}) => {
return (
<div className="mediaLinear">
<div className="Media">
<div>
<img
src={image}
alt="Generic placeholder"
/>
</div>
<div>
<h1>Media Heading</h1>
<p>{content}</p>
</div>
</div>
</div>
)
}
<Rendering typeGet={typeGet} content={content} image={image} />
</div>
);
}


const Nested = ({props, content, image}) => {
return (
<div className="mediaNested">
<div className="Media">
<div>
<img
src={image}
alt="Generic placeholder"
/>
</div>
<div>
<h1>Heading 1</h1>
<p>There are many variations of passages of Lorem Ipsum available,
but the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly
believable. If you are going to use a passage of Lorem Ipsum, you
need to be sure there isn't anything embarrassing hidden
in the middle of text. All the Lorem</p>
</div>
</div>
<div style={{ paddingLeft: "10vw" }}>
<div className="Media">
<div>
<img
src={image}
alt="Generic placeholder"
/>
</div>
<div>
<h1>Heading 2</h1>
<p>Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC, makin
g it over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure Latin
words, consectetur, from a Lorem Ipsum passage, and going through the
cites of the word in classical literature,</p>
</div>
</div>
</div>
</div>
);
}
function Rendering({ typeGet, content, image }) {
if (typeGet === "linear") {
return <Linear value={typeGet} content={content} image={image} />;
} else if (typeGet === "nested") {
return <Nested value={typeGet} content={content} image={image} />;
} else {
console.log("props error");
}
}



const Linear = ({ props, content, image }) => {
return (
<div className="mediaLinear">
<div className="Media">
<div>
<img src={image} alt="Generic placeholder" />
</div>
<div>
<h1>Media Heading</h1>
<p>{content}</p>
</div>
</div>
</div>
);
};

const Nested = ({ props, content, image }) => {
return (
<div className="mediaNested">
<div className="Media">
<div>
<img src={image} alt="Generic placeholder" />
</div>
<div>
<h1>Heading 1</h1>
<p>
There are many variations of passages of Lorem Ipsum available, but
the majority have suffered alteration in some form, by injected
humour, or randomised words which don't look even slightly
believable. If you are going to use a passage of Lorem Ipsum, you
need to be sure there isn't anything embarrassing hidden in the
middle of text. All the Lorem
</p>
</div>
</div>
<div style={{ paddingLeft: "10vw" }}>
<div className="Media">
<div>
<img src={image} alt="Generic placeholder" />
</div>
<div>
<h1>Heading 2</h1>
<p>
Contrary to popular belief, Lorem Ipsum is not simply random text.
It has roots in a piece of classical Latin literature from 45 BC,
makin g it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia, looked up one of
the more obscure Latin words, consectetur, from a Lorem Ipsum
passage, and going through the cites of the word in classical
literature,
</p>
</div>
</div>
</div>
</div>
);
};

Media.propType = {
typeGet: Proptypes.oneOf(["linear", "nested"]),
Expand Down
31 changes: 12 additions & 19 deletions src/stories/media.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,24 +6,17 @@ import { withInfo } from "@storybook/addon-info";
import Media from "../components/Media";

storiesOf("Media", module)
.addDecorator(withInfo)
.addWithJSX("with h1", () => (
.addDecorator(withInfo)
.addWithJSX("with h1", () => (
<div>
<Media
typeGet="linear"
image="https://tinyurl.com/yylsuh97"
>
Contrary to popular belief,
Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin
literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin
professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words,
consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literatur.
</Media>
<Media
typeGet="nested"
image="https://tinyurl.com/yylsuh97"
>
</Media>
<Media typeGet="linear" image="https://tinyurl.com/yylsuh97">
Contrary to popular belief, Lorem Ipsum is not simply random text. It
has roots in a piece of classical Latin literature from 45 BC, making it
over 2000 years old. Richard McClintock, a Latin professor at
Hampden-Sydney College in Virginia, looked up one of the more obscure
Latin words, consectetur, from a Lorem Ipsum passage, and going through
the cites of the word in classical literatur.
</Media>
<Media typeGet="nested" image="https://tinyurl.com/yylsuh97"></Media>
</div>
));

));