{"version":3,"file":"ComponentList-xKA6x93B.js","sources":["../../../app/javascript/components/Website/src/pages/ComponentList.tsx"],"sourcesContent":["import React, { useState } from \"react\"\nimport { NavLink, Outlet, useLoaderData, useOutlet } from \"react-router-dom\"\nimport { Body, Flex } from 'playbook-ui'\n\nimport { KitCard } from \"../components/KitCard\"\nimport { KitFilter } from \"../components/KitFilter\"\nimport { Hero } from \"../components/Hero\"\nimport { KitGrid } from \"../components/KitGrid\"\nimport { PageContainer } from \"../components/PageContainer\"\nimport { CategoryTitle } from \"../components/CategoryTitle\"\n\nexport type Kit = {\n  category: string;\n  components: {\n    name: string;\n    description: string;\n    platforms: string[];\n    status: \"stable\" | \"beta\";\n  }[];\n  description: string;\n};\n\nexport type Kits = Kit[];\n\nexport interface Component {\n  status: string;\n}\n\nconst description =\n  \"Components are the reusable building blocks of our design system. Each component meets a specific interaction or UI need, and has been specifically created to work together to create patterns and intuitive user experiences.\"\n\nexport default function ComponentList() {\n  const outlet = useOutlet()\n  const { kits } = useLoaderData()\n  const [kitsToShow, setKitsToShow] = useState(kits)\n  const [platform, setPlatform] = useState('react')\n\n  return (\n    <>\n      {!outlet && (\n        <>\n          <Hero description={description} title=\"Components\" />\n\n          <Flex\n            align=\"center\"\n            orientation=\"column\"\n            paddingBottom=\"lg\"\n          >\n            <KitFilter\n              kits={kits}\n              setFilteredKits={setKitsToShow}\n              setPlatform={setPlatform}\n            />\n          </Flex>\n\n          <PageContainer>\n            {kitsToShow.filter(({ components }: {components: Component[] }) => \n            components.some((component: Component) => component.status === \"stable\")).length === 0 ? (\n              <Flex\n                justify=\"center\"\n                orientation=\"row\"\n              >\n                <Body\n                  text=\"No Results, Try Again\"\n                />\n              </Flex>\n            ) : (\n              kitsToShow.map(({ category, components }: Kit, index: number) => (\n                <section\n                  className=\"category mb_xl\"\n                  key={`${category}-${index}`}\n                  id={category}\n                >\n                  <NavLink to={`/beta/kit_category/${category}`}>\n                    <CategoryTitle category={category} />\n                  </NavLink>\n                  <KitGrid>\n                    {components\n                    .filter(component => component.status === \"stable\")\n                    .map(({ name, description }, index) => (\n                      <KitCard\n                        description={description}\n                        name={name}\n                        key={`${name}-${index}`}\n                        platform={platform}\n                      />\n                    ))}\n                  </KitGrid>\n                </section>\n              ))\n            )}\n          </PageContainer>\n        </>\n      )}\n\n      <Outlet />\n    </>\n  )\n}\n"],"names":["description","ComponentList","outlet","useOutlet","kits","useLoaderData","kitsToShow","setKitsToShow","useState","platform","setPlatform","jsxs","Fragment","jsx","Hero","Flex","KitFilter","PageContainer","components","component","Body","category","index","NavLink","CategoryTitle","KitGrid","name","KitCard","Outlet"],"mappings":"soBA4BA,MAAMA,EACJ,kOAEF,SAAwBC,GAAgB,CACtC,MAAMC,EAASC,IACT,CAAE,KAAAC,GAASC,IACX,CAACC,EAAYC,CAAa,EAAIC,WAASJ,CAAI,EAC3C,CAACK,EAAUC,CAAW,EAAIF,WAAS,OAAO,EAEhD,OAEKG,EAAA,KAAAC,WAAA,CAAA,SAAA,CAAA,CAACV,GAEES,EAAAA,KAAAC,EAAA,SAAA,CAAA,SAAA,CAACC,EAAAA,IAAAC,EAAA,CAAK,YAAAd,EAA0B,MAAM,YAAa,CAAA,EAEnDa,EAAA,IAACE,EAAA,CACC,MAAM,SACN,YAAY,SACZ,cAAc,KAEd,SAAAF,EAAA,IAACG,EAAA,CACC,KAAAZ,EACA,gBAAiBG,EACjB,YAAAG,CAAA,CACF,CAAA,CACF,QAECO,EACE,CAAA,SAAAX,EAAW,OAAO,CAAC,CAAE,WAAAY,KACtBA,EAAW,KAAMC,GAAyBA,EAAU,SAAW,QAAQ,CAAC,EAAE,SAAW,EACnFN,EAAA,IAACE,EAAA,CACC,QAAQ,SACR,YAAY,MAEZ,SAAAF,EAAA,IAACO,EAAA,CACC,KAAK,uBAAA,CACP,CAAA,CAAA,EAGFd,EAAW,IAAI,CAAC,CAAE,SAAAe,EAAU,WAAAH,CAAA,EAAmBI,IAC7CX,EAAA,KAAC,UAAA,CACC,UAAU,iBAEV,GAAIU,EAEJ,SAAA,CAACR,EAAAA,IAAAU,EAAA,CAAQ,GAAI,sBAAsBF,CAAQ,GACzC,SAACR,EAAAA,IAAAW,EAAA,CAAc,SAAAH,EAAoB,CACrC,CAAA,QACCI,EACE,CAAA,SAAAP,EACA,OAAOC,GAAaA,EAAU,SAAW,QAAQ,EACjD,IAAI,CAAC,CAAE,KAAAO,EAAM,YAAA1B,CAAAA,EAAesB,IAC3BT,EAAA,IAACc,EAAA,CACC,YAAa3B,EACb,KAAA0B,EAEA,SAAAjB,CAAA,EADK,GAAGiB,CAAI,IAAIJ,CAAK,EAGxB,CAAA,EACH,CAAA,CAAA,EAjBK,GAAGD,CAAQ,IAAIC,CAAK,EAmB5B,CAAA,EAEL,CAAA,EACF,QAGDM,EAAO,EAAA,CACV,CAAA,CAAA,CAEJ"}