import { Meta } from "@storybook/blocks";

<Meta title="Introduction" />

<style>
	{`
    img {
      margin: 1rem;
      display: flex;
      justify-content: left;

      @media (max-width: 600px) {
        width: 200px;
      }
    }

    .container {
      margin: 0 auto;
      padding: 0 1rem;
    }

    .heading {
      font-size: 2rem;
      margin: 0 auto;
    }

    .subheading {
      font-size: 1rem;
      margin: 1rem auto;
    }

    ul {
      list-style: none;
      padding-left: 0;
      margin: 0;
    }

    li a {
      color: #ff7c01 !important;
    }
  `}
</style>

<img src="./gradio.svg" alt="Gradio Logo" />
<div class="container">

<div class="heading">Welcome to the Gradio Storybook</div>

This is Gradio's component library. It is a collection of reusable components that are used to build Gradio interfaces.
Here you'll find documentation for each component, the props they take, and the visual variations they have, as well as some examples of how they can be used.
This is still a work in progress and we welcome any contributions.

<div class="divider" />

<div class="subheading">Resources</div>
<ul>

  <li><a href="https://gradio.app">Documentation</a></li>
  <li><a href="https://gradio.app/guides/">Guides</a></li>
  <li><a href="https://github.com/gradio-app/gradio">GitHub</a></li>
  <li><a href="https://discord.com/invite/feTf9x3ZSB">Discord</a></li>
  <li><a href="https://discuss.huggingface.co/c/gradio/26">Hugging Face Forum</a></li>
</ul>

<div class="subheading">Feedback</div>
If you have any questions, issues, or feedback on our components, please refer to our Discord or raise an issue in our GitHub repo. 
</div>