import * as React from "react";
import { GRP } from "storybook/GRP";
import { withKnobs, text, boolean, number } from "@storybook/addon-knobs";

export default {
  title: "Plugins|Web Layouts/Ecommerce",
};

export const Ecommerce01: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec12c8d464a73_Ecommerce%205-1.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce02: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec19030464a74_Ecommerce%204-2.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce03: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec11238464a80_Ecommerce%203-2.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce04: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1c200464a75_Ecommerce%202-1.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce05: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec1ca40464a77_Ecommerce%201-2.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce06: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="https://assets.website-files.com/5d4fd160326ec183bf464939/5d4fd160326ec12140464a78_Ecommerce%203-1.jpg"
        />
      )}
    </>
  );
};

export const Ecommerce07: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Ecommerce/07.png"
        />
      )}
    </>
  );
};

export const Ecommerce08: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Ecommerce/08.png"
        />
      )}
    </>
  );
};

export const Ecommerce09: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Ecommerce/09.png"
        />
      )}
    </>
  );
};

export const Ecommerce10: React.FC = () => {
  return (
    <>
      {boolean("Show inspiration", false) && (
        <GRP
          title="Inspiration"
          src="http://ambid-backups.s3.amazonaws.com/screenshots/sandcastle/placeholders/Ecommerce/10.png"
        />
      )}
    </>
  );
};

export const All: React.FC = () => <div />;