@hypothesis/frontend-shared/lib/pattern-library/components/patterns/GettingStartedPage.js

Shared components, styles and utilities for Hypothesis projects

var _jsxFileName = "/home/runner/work/frontend-shared/frontend-shared/src/pattern-library/components/patterns/GettingStartedPage.tsx";
import { Link } from '../../../';
import Library from '../Library';
import { jsxDEV as _jsxDEV, Fragment as _Fragment } from "preact/jsx-dev-runtime";
export default function GettingStartedPage() {
  return _jsxDEV(Library.Page, {
    title: "Getting started",
    intro: _jsxDEV(_Fragment, {
      children: _jsxDEV("p", {
        children: ["The ", _jsxDEV("code", {
          children: "@hypothesis/frontend-shared"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 11,
          columnNumber: 17
        }, this), " package provides reusable UI components, hooks and utilities for Hypothesis front-end applications."]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 10,
        columnNumber: 11
      }, this)
    }, void 0, false),
    children: _jsxDEV(Library.Section, {
      children: [_jsxDEV(Library.SectionL2, {
        title: "Installation",
        children: [_jsxDEV("p", {
          children: ["Your application needs to install", ' ', _jsxDEV(Link, {
            href: "https://tailwindcss.com/",
            underline: "always",
            children: "tailwindcss"
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 22,
            columnNumber: 13
          }, this), ' ', "to use this ", "package's", " updated components."]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 20,
          columnNumber: 11
        }, this), _jsxDEV(Library.Code, {
          content: `$ yarn add tailwindcss @hypothesis/frontend-shared`
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 27,
          columnNumber: 11
        }, this)]
      }, void 0, true, {
        fileName: _jsxFileName,
        lineNumber: 19,
        columnNumber: 9
      }, this), _jsxDEV(Library.SectionL2, {
        title: "Configuration",
        children: _jsxDEV(Library.SectionL3, {
          title: "Configure tailwindcss",
          children: [_jsxDEV("p", {
            children: ["Configure your ", "project's", " tailwind configuration object:"]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 33,
            columnNumber: 13
          }, this), _jsxDEV("ul", {
            children: [_jsxDEV("li", {
              children: ["Use this ", "package's", " tailwind preset"]
            }, void 0, true, {
              fileName: _jsxFileName,
              lineNumber: 35,
              columnNumber: 15
            }, this), _jsxDEV("li", {
              children: ["Add this ", "package's", " source to the ", "configuration's", ' ', _jsxDEV("code", {
                children: "content"
              }, void 0, false, {
                fileName: _jsxFileName,
                lineNumber: 38,
                columnNumber: 17
              }, this), " globs"]
            }, void 0, true, {
              fileName: _jsxFileName,
              lineNumber: 36,
              columnNumber: 15
            }, this)]
          }, void 0, true, {
            fileName: _jsxFileName,
            lineNumber: 34,
            columnNumber: 13
          }, this), _jsxDEV(Library.Code, {
            size: "sm",
            title: "Your project's tailwind config",
            content: `import tailwindConfig from '@hypothesis/frontend-shared/lib/tailwind.preset.js';

export default {
  presets: [tailwindConfig],
  content: [
    './node_modules/@hypothesis/frontend-shared/lib/**/*.{js,ts,tsx}',
    // ...
  ],
  // ...`
          }, void 0, false, {
            fileName: _jsxFileName,
            lineNumber: 41,
            columnNumber: 13
          }, this)]
        }, void 0, true, {
          fileName: _jsxFileName,
          lineNumber: 32,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 31,
        columnNumber: 9
      }, this), _jsxDEV(Library.SectionL2, {
        title: "Usage",
        children: _jsxDEV(Library.Usage, {
          componentName: "Card, Link"
        }, void 0, false, {
          fileName: _jsxFileName,
          lineNumber: 57,
          columnNumber: 11
        }, this)
      }, void 0, false, {
        fileName: _jsxFileName,
        lineNumber: 56,
        columnNumber: 9
      }, this)]
    }, void 0, true, {
      fileName: _jsxFileName,
      lineNumber: 18,
      columnNumber: 7
    }, this)
  }, void 0, false, {
    fileName: _jsxFileName,
    lineNumber: 6,
    columnNumber: 5
  }, this);
}
//# sourceMappingURL=GettingStartedPage.js.map