Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
import React from "react";
import styled from "styled-components";
import { storiesOf } from "@storybook/react";
import { text, withKnobs } from "@storybook/addon-knobs";
import { mobileViewport, addFullWidthWrapperDecorator } from "../utils";
import { Instagram } from "../../src/components/shared/Instagram";
/** Important pieces here. Images located in ../static/ */
import Instagram1 from "gatsby-image-fluid!../static/instagram_1.jpg";
import Instagram2 from "gatsby-image-fluid!../static/instagram_2.jpg";
import Instagram3 from "gatsby-image-fluid!../static/instagram_3.jpg";
import Instagram4 from "gatsby-image-fluid!../static/instagram_4.jpg";
const posts = [
{
image: {
fluid: Instagram1,
alt: "Testing"
},
link: "https://www.instagram.com/p/Bxx-cxvFRPA/"
},
{
image: {
fluid: Instagram2,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
},
{
image: {
fluid: Instagram3,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
},
{
image: {
fluid: Instagram4,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
},
{
image: {
fluid: Instagram2,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
},
{
image: {
fluid: Instagram3,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
},
{
image: {
fluid: Instagram1,
alt: "Testing"
},
link: "https://www.instagram.com/p/123123/"
}
];
const SBInstagram: React.FC = () => (
<InstagramWrapper>
<Instagram
title={text("Title", "Test")}
subtitle={text(
"Subtitle",
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo lorem, dapibus nec venenatis viverra."
)}
posts={posts}
/>
</InstagramWrapper>
);
storiesOf("Shared|Instagram", module)
.addDecorator(withKnobs)
.addDecorator(addFullWidthWrapperDecorator)
.add("Desktop", () => <SBInstagram />)
.add("Mobile", () => <SBInstagram />, mobileViewport);
const InstagramWrapper = styled.div`
margin-top: 50px;
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment