"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Examples = Examples;

var _solid = require("@heroicons/react/solid");

var _Badge = require("../../components/Badge");

var _Button = require("../../components/Button");

var _Card = require("../../components/Card");

var _DescriptionCard = require("../../components/DescriptionCard");

var _Status = require("../../components/Status");

var _Feed = require("../../components/Feed");

var _Icon = require("../../components/Icon");

var _Table = require("../../components/Table");

var _icons = require("../../icons");

var _TextInput = require("../../components/TextInput");

var _jsxRuntime = require("react/jsx-runtime");

var activity = [{
  id: 0,
  type: "tags",
  person: {
    name: "Hilary Mahy",
    href: "#"
  },
  tags: [{
    name: "Bug",
    href: "#",
    color: "bg-red-500"
  }, {
    name: "Accessibility",
    href: "#",
    color: "bg-indigo-500"
  }],
  date: "6h ago"
}, {
  id: 1,
  type: "assignment",
  person: {
    name: "Hilary Mahy",
    href: "#"
  },
  assigned: {
    name: "Kristin Watson",
    href: "#"
  },
  tags: [{
    name: "Bug",
    href: "#",
    color: "bg-red-500"
  }, {
    name: "Accessibility",
    href: "#",
    color: "bg-indigo-500"
  }],
  date: "2d ago"
}, {
  id: 1,
  type: "assignment",
  person: {
    name: "Hilary Mahy",
    href: "#"
  },
  assigned: {
    name: "Kristin Watson",
    href: "#"
  },
  date: "2d ago"
}, {
  id: 1,
  type: "comment",
  person: {
    name: "Eduardo Benz",
    href: "#"
  },
  imageUrl: "https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80",
  comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam. ",
  date: "6d ago"
}, {
  id: -1,
  type: "comment",
  person: {
    name: "Eduardo Benz",
    href: "#"
  },
  imageUrl: "https://images.unsplash.com/photo-1520785643438-5bf77931f493?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80",
  comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam. ",
  date: "6d ago"
}, {
  id: 3,
  type: "tags",
  person: {
    name: "Hilary Mahy",
    href: "#"
  },
  tags: [{
    name: "Bug",
    href: "#",
    color: "bg-red-500"
  }, {
    name: "Accessibility",
    href: "#",
    color: "bg-indigo-500"
  }],
  date: "6h ago"
}, {
  id: 4,
  type: "comment",
  person: {
    name: "Jason Meyers",
    href: "#"
  },
  icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Avatar, {
    url: "https://images.unsplash.com/photo-1531427186611-ecfd6d936c79?ixlib=rb-=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=8&w=256&h=256&q=80"
  }),
  comment: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Tincidunt nunc ipsum tempor purus vitae id. Morbi in vestibulum nec varius. Et diam cursus quis sed purus nam. Scelerisque amet elit non sit ut tincidunt condimentum. Nisl ultrices eu venenatis diam.",
  tags: [{
    name: "Bug",
    href: "#",
    color: "bg-red-500"
  }, {
    name: "Accessibility",
    href: "#",
    color: "bg-indigo-500"
  }],
  date: "2h ago"
}];
/* This example requires Tailwind CSS v2.0+ */

var data = [{
  name: "Jane Cooper",
  title: "Regional Paradigm Technician",
  department: "Optimization",
  role: "Admin",
  email: "jane.cooper@example.com",
  image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
}, // More people...
{
  name: "Jane Cooper",
  title: "Regional Paradigm Technician",
  department: "Optimization",
  role: "Admin",
  email: "jane.cooper@example.com",
  image: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=4&w=256&h=256&q=60"
} // More people...
];
var cards = [{
  title: "Graph API",
  initials: "GA",
  href: "#",
  subtitle: "Soething else",
  bgColor: "bg-pink-600"
}, {
  title: "Component Design",
  initials: "CD",
  href: "#",
  bgColor: "bg-purple-600",
  icon: _solid.MailIcon
}, {
  title: "Templates",
  initials: "T",
  href: "#",
  bgColor: "bg-yellow-500",
  icon: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
}, {
  title: "React Components",
  initials: "RC",
  href: "#",
  bgColor: "bg-green-500"
}];
var items = [{
  name: "Name",
  value: "John DOe"
}, {
  name: "Age",
  value: 12
}, {
  name: "Parent",
  value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
    label: "Leading",
    type: "email",
    leadingIcon: _solid.MailIcon
  })
}, {
  name: "Parent",
  value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
    label: "Name",
    help: "just your name for now",
    trailingIcon: _solid.QuestionMarkCircleIcon
  })
}, {
  name: "Parent",
  value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
    label: "Email",
    error: "just your name for now",
    type: "email",
    leadingIcon: _solid.PlusCircleIcon
  })
}, {
  name: "Parent",
  value: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TextInput.TextInput, {
    label: "Website",
    prefix: "https://"
  })
}, {
  colspan: 2,
  name: "Adrdress",
  value: "\n123 President City\nMain City\n  "
}];

function Examples() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    className: "flex justify-center",
    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("main", {
      className: "flex flex-col max-w-7xl",
      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h1", {
        className: "py-12",
        children: "Components"
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Icon"
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
            icon: _icons.Icons.s3
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
            name: "s3"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.Icon, {
            name: "mongo"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
            good: true
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
            good: false,
            className: "h-16 w-16"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Status.Status, {
            mixed: true,
            className: "h-16 w-16"
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Badge"
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
            text: "small",
            size: "xs"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
            text: "large",
            size: "sm"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
            text: "small",
            size: "xs",
            dot: "#green"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
            text: "large",
            size: "sm",
            dot: "#ff0000"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.Badge, {
            text: "large",
            size: "sm",
            dot: "currentColor"
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Button"
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "small",
            size: "xs"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "large",
            size: "sm"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "medium",
            size: "md"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "large",
            size: "lg"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "x-large",
            size: "xl"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "small",
            size: "xs",
            icon: _solid.MailIcon
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "large",
            size: "sm",
            leadingIcon: _solid.MailIcon
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "medium",
            size: "md",
            icon: _solid.PlusIcon
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.Button, {
            text: "medium",
            size: "lg",
            icon: _solid.PlusIcon
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Card"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.Card, {
            cards: cards,
            className: "grid-cols-2"
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Horizontal Card"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Card.HorizontalCard, {
            cards: cards
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Description"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DescriptionCard.DescriptionCard, {
            items: items,
            title: "Canary Checker",
            subtitle: "Namespace xyz"
          })
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Table"
        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
            data: data,
            columns: ["Name", "Title", "Department", "Role"]
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Table.Table, {
            data: activity,
            columns: ["Type", "Comment", "Role"]
          })]
        })]
      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("section", {
        className: "p-8 rounded-md shadow-md mb-12 border border-gray-200",
        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("h4", {
          children: "Feed"
        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
          className: "mt-4 bg-gray-50 p-8 rounded-md",
          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feed.Feed, {
            items: activity
          })
        })]
      })]
    })
  });
}