@scbt-ecom/ui 0.4.1 → 0.4.2

package/lib/widgets/banner/ui/banners/BannerWithSeparateImg.tsx

@@ -0,0 +1,60 @@
+import { type IBannerProps } from '../../Banner'
+import money from '../../money.png'
+import { BannerButtonsGroup } from '../BannerButtonsGroup'
+import { Heading, ResponsiveContainer } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+import { Advantages } from '$/widgets/Advantages'
+
+export const BannerWithSeparateImg = ({
+  headTitle,
+  subtitle,
+  buttonsConfig,
+  advantagesList,
+  classes
+}: Omit<IBannerProps, 'bannerVariant'>) => {
+  const countButtons = Object.keys(buttonsConfig).reduce((acc, key) => (key ? acc + 1 : acc), 0)
+
+  return (
+    <section data-id='banner-section' className={cn('relative bg-banner-skyblue-300 pb-6 desktop:h-[456px]', classes?.section)}>
+      <ResponsiveContainer data-id='banner-container' className={cn(classes?.container)}>
+        <div
+          data-id='banner-grid'
+          className={cn('grid-mob-apply desktop:grid-desk-apply grid mobile:justify-center', classes?.wrapper)}
+        >
+          <div
+            data-id='banner-text-block'
+            className={cn('grid-text-apply mb-2 flex flex-col gap-4 pt-6 desktop:pb-10 desktop:pt-20', classes?.textBlock)}
+          >
+            <Heading data-id='banner-title' as='h1' className={cn('text-color-dark', classes?.title)}>
+              {headTitle}
+            </Heading>
+            <p data-id='banner-subtitle' className={cn('desk-body-regular-l text-color-dark', classes?.subtitle)}>
+              {subtitle}
+            </p>
+          </div>
+
+          <BannerButtonsGroup buttonsConfig={buttonsConfig} classes={classes} />
+
+          <div
+            data-id='banner-image-wrapper'
+            className={cn(
+              'grid-image-apply w-full desktop:h-full desktop:w-[550px]',
+              { 'h-[450px]': countButtons === 2 },
+              { 'h-[410px]': countButtons === 1 },
+              classes?.imageContainer
+            )}
+          >
+            <img data-id='banner-image' src={money} alt='money' className={cn('h-full w-full object-contain', classes?.image)} />
+          </div>
+        </div>
+
+        <div
+          data-id='banner-advantages'
+          className={cn('absolute bottom-[-400px] right-1/2 translate-x-1/2 desktop:bottom-[-50px]', classes?.advantages)}
+        >
+          {advantagesList && advantagesList?.length > 0 && <Advantages advantagesList={advantagesList} />}
+        </div>
+      </ResponsiveContainer>
+    </section>
+  )
+}

package/lib/widgets/banner/ui/banners/index.ts

@@ -0,0 +1 @@
+export { BannerWithSeparateImg } from './BannerWithSeparateImg'

package/lib/widgets/footer/Footer.tsx

@@ -0,0 +1,95 @@
+import * as React from 'react'
+import { defaultCopyright, defaultLigal, defaultNavigationLinks, defaultPhones, defaultSocialsLinks } from './model/defaultValues'
+import type { IFooterNavLinks, IFooterPhones, IFooterSocialLinks } from './model/types'
+import {
+  Copyright,
+  Ligal,
+  NavLinks,
+  PhonesBlock,
+  SocialLinks,
+  type TCopyrightClasses,
+  type TLigalClasses,
+  type TNavigationLinksClasses,
+  type TPhoneBlockClasses,
+  type TSocialLinksClasses
+} from './ui'
+import { Icon, ResponsiveContainer, Section } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+type IFooterClasses = TLigalClasses &
+  TNavigationLinksClasses &
+  TPhoneBlockClasses &
+  TSocialLinksClasses &
+  TCopyrightClasses & {
+    section: string
+    container: string
+    footerRoot: string
+    footerHead: string
+    footerSocialBlock: string
+    footerLogo: string
+  }
+
+export interface IFooterProps {
+  classes?: Partial<IFooterClasses>
+  withSocial?: boolean
+  withPhones?: boolean
+  withNavLinks?: boolean
+  withLigal?: boolean
+  withCopyright?: boolean
+  withSiteMap?: boolean
+
+  socialsLinks?: IFooterSocialLinks[]
+  phones?: IFooterPhones[]
+  navigationLinks: IFooterNavLinks[]
+  ligal: string | React.ReactElement
+  copyright?: string | React.ReactElement
+}
+
+export const Footer = ({
+  withSocial = true,
+  withPhones = true,
+  withNavLinks = true,
+  withLigal = true,
+  withCopyright = true,
+  withSiteMap = true,
+  socialsLinks = defaultSocialsLinks,
+  phones = defaultPhones,
+  navigationLinks = defaultNavigationLinks,
+  ligal = defaultLigal,
+  copyright = defaultCopyright,
+  classes
+}: IFooterProps) => {
+  return (
+    <Section className={cn('w-full', classes?.section)}>
+      <ResponsiveContainer className={cn(classes?.container)}>
+        <div className={cn('bg-color-footer px-4 py-8 desktop:px-6 desktop:py-10', classes?.footerRoot)}>
+          <div className={cn('mb-8 flex items-center justify-between gap-6', classes?.footerHead)}>
+            <div className={cn(classes?.footerSocialBlock)}>
+              <a href='/' className={cn(classes?.footerLogo)}>
+                <Icon name='brandLogos/logoWhite' className='h-[32px] w-[194px]' />
+              </a>
+              {withSocial && <SocialLinks socialsLinks={socialsLinks} classes={classes} />}
+            </div>
+            {withPhones && <PhonesBlock phones={phones} classes={classes} />}
+          </div>
+
+          {withNavLinks && <NavLinks navigationLinks={navigationLinks} classes={classes} />}
+          {withLigal && <Ligal ligal={ligal} classes={classes} />}
+          <div className='mt-6 flex items-start justify-between gap-6'>
+            {withCopyright && <Copyright text={copyright} classes={classes} />}
+            {withSiteMap && (
+              <a
+                href='https://sovcombank.ru/site-map'
+                target='_blank'
+                rel='noreferrer'
+                className='desk-body-regular-m text-color-white'
+              >
+                Карта сайта
+              </a>
+            )}
+          </div>
+        </div>
+      </ResponsiveContainer>
+    </Section>
+  )
+}

package/lib/widgets/footer/index.ts

@@ -0,0 +1 @@
+export { Footer, type IFooterProps } from './Footer'

package/lib/widgets/footer/model/defaultValues.tsx

@@ -0,0 +1,105 @@
+import type { IFooterNavLinks, IFooterPhones, IFooterSocialLinks } from './types'
+
+export const defaultCopyright = (
+  <>
+    © 2004-2024, ПАО «Совкомбанк». Все права защищены. <br /> Генеральная лицензия Банка России №963 от 5 декабря 2014 г.
+  </>
+)
+
+export const defaultLigal = `Кредит на бизнес цели, срок 3, 6, 9, 12, 18, 24, 36, 48, 60 мес. Ставка – от 22,9%*. *Точная процентная ставка
+        устанавливается по соглашению сторон и определяется исходя из платёжеспособности и кредитоспособности клиента, а также
+        иных индивидуальных особенностей клиента. Сумма 100 000 – 50 000 000 руб. Кредит выдается на карту “Халва”, открытый в
+        Банке. Банк вправе отказать в предоставлении кредита без объяснения причины, а также запросить дополнительную информацию о
+        клиенте. Предварительное одобрение не влечет обязательств Банка по выдаче кредита. В некоторых случаях срок рассмотрения
+        заявки может составлять до 3 рабочих дней. Полный электронный документооборот при наличии открытого р/с в ПАО «Совкомбанк»
+        и действующей ЭЦП. Условия рекламы действительны на 20.02.2024г.`
+
+export const defaultPhones: IFooterPhones[] = [
+  { phone: '8 800 100-00-06', text: 'Звонок по России (бесплатно)' },
+  { phone: '+7 (495) 988 00 00', text: 'Для звонков из-за рубежа (платно)' }
+]
+
+export const defaultSocialsLinks: IFooterSocialLinks[] = [
+  { iconName: 'social/vk', href: '/vk' },
+  { iconName: 'social/telegram', href: '/tg' },
+  { iconName: 'social/classmates', href: '/cl' }
+]
+
+export const defaultNavigationLinks: IFooterNavLinks[] = [
+  {
+    groupLabel: 'Совкомбанк',
+    links: [
+      { text: 'О банке', href: '/' },
+      { text: 'Реквизиты и лицензии', href: '/' },
+      { text: 'Пресс-центр', href: '/' },
+      { text: 'Удостоверяющий центр ПАО «Совкомбанк»', href: '/' },
+      { text: 'Работа у нас', href: '/' },
+      { text: 'Контакты', href: '/' },
+      { text: 'Раскрытие информации', href: '/' },
+      { text: 'Страница раскрытия информации в Интерфакс', href: '/' },
+      { text: 'Реализация залогового имущества', href: '/' },
+      { text: 'Клиентам и партнерам', href: '/' },
+      { text: 'Биометрия', href: '/' },
+      { text: 'Стандарты безопасности', href: '/' },
+      { text: 'Информация о процентных ставках по договорам банковского вклада с физическими лицами', href: '/' },
+      { text: 'ООО «Совком Финанс»', href: '/' },
+      { text: 'Безопасность', href: '/' }
+    ]
+  },
+  {
+    groupLabel: 'Сервисы',
+    links: [
+      { text: 'Подарочная карта «Халва»', href: '/' },
+      { text: 'Страховые продукты', href: '/' },
+      { text: 'МультиЮрист', href: '/' },
+      { text: 'Единая социальная карта «Уралочка»', href: '/' },
+      { text: 'Единая Карта Жителя Мурманской области', href: '/' },
+      { text: 'Безопасные расчёты', href: '/' },
+      { text: 'Улучшение кредитной истории', href: '/' },
+      { text: 'Дистанционные сервисы Совкомбанка', href: '/' },
+      { text: 'Программы реструктуризации долга', href: '/' }
+    ]
+  },
+  {
+    groupLabel: 'Услуги банка',
+    links: [
+      { text: 'Карты', href: '/' },
+      { text: 'Кредиты', href: '/' },
+      { text: 'Кредиты наличными', href: '/' },
+      { text: 'Ипотека', href: '/' },
+      { text: 'Автокредиты', href: '/' },
+      { text: 'Кредитный калькулятор', href: '/' },
+      { text: 'Вклады', href: '/' },
+      { text: 'Инвестиции', href: '/' },
+      { text: 'Платежи', href: '/' },
+      { text: 'Сервисы', href: '/' },
+      { text: 'Малому бизнесу и ИП', href: '/' },
+      { text: 'Корпоративным клиентам', href: '/' },
+      { text: 'CIB', href: '/' },
+      { text: 'Драгоценные металлы в слитках', href: '/' },
+      { text: 'Счета в драгоценных металлах', href: '/' }
+    ]
+  },
+  {
+    groupLabel: 'Клиентам других банков',
+    links: [
+      { text: 'Держателям карт рассрочки Банка Хоум Кредит', href: '/' },
+      { text: 'ПАО КБ «Восточный»', href: '/' },
+      { text: 'Держателям карт «Совесть»', href: '/' },
+      { text: 'АО «Нордеа Банк»', href: '/' },
+      { text: 'ЗАО «ДжиИ Мани банк»', href: '/' },
+      { text: 'АО «Меткомбанк»', href: '/' },
+      { text: 'АКБ «РосЕвроБанк» (АО)', href: '/' },
+      { text: 'ПАО «Татфондбанк»', href: '/' },
+      { text: 'АО АКБ «Экспресс-Волга»', href: '/' },
+      { text: 'АО «ВКАБАНК»', href: '/' },
+      { text: 'ООО «ОНЕЙ БАНК»', href: '/' },
+      { text: 'АО «Евразийский»', href: '/' },
+      { text: 'АО «НФК»', href: '/' },
+      { text: 'ООО «РТС-Капитал»', href: '/' },
+      { text: 'ООО «ИК Септем Капитал»', href: '/' },
+      { text: 'Помощь', href: '/' },
+      { text: 'Офисы и банкоматы', href: '/' }
+    ]
+  }
+]

package/lib/widgets/footer/model/types.ts

@@ -0,0 +1,19 @@
+import { type SpritesMap } from '$/shared/ui'
+
+export interface IFooterSocialLinks {
+  iconName: `social/${SpritesMap['social']}`
+  href: string
+}
+
+export interface IFooterNavLinks {
+  groupLabel: string
+  links: {
+    text: string
+    href: string
+  }[]
+}
+
+export interface IFooterPhones {
+  phone: string
+  text: string
+}

package/lib/widgets/footer/ui/Copyright.tsx

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { cn } from '$/shared/utils'
+
+export type TCopyrightClasses = {
+  text: string
+}
+
+interface ICopyrightProps {
+  text?: string | React.ReactElement
+  classes?: Partial<TCopyrightClasses>
+}
+
+export const Copyright = ({ text, classes }: ICopyrightProps) => {
+  return <div className={cn('desk-body-regular-m text-color-footer', classes?.text)}>{text}</div>
+}

package/lib/widgets/footer/ui/Ligal.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import * as React from 'react'
+import { cn } from '$/shared//utils'
+
+export type TLigalClasses = {
+  ligalRoot: string
+  ligal: string
+  ligalButton: string
+}
+
+interface ILigalProps {
+  ligal: string | React.ReactElement
+  classes?: Partial<TLigalClasses>
+}
+
+export const Ligal = ({ ligal, classes }: ILigalProps) => {
+  const [isExpanded, setIsExpanded] = React.useState(false)
+  const [isClamped, setIsClamped] = React.useState(false)
+  const ligalRef = React.useRef<HTMLParagraphElement | null>(null)
+
+  React.useEffect(() => {
+    const element = ligalRef.current
+    if (element) {
+      setIsClamped(element.scrollHeight > element.clientHeight)
+    }
+  }, [])
+
+  return (
+    <div className={cn('mt-8 flex flex-col gap-4', classes?.ligalRoot)}>
+      <p ref={ligalRef} className={cn('desk-body-regular-m text-color-footer', { 'line-clamp-3': !isExpanded }, classes?.ligal)}>
+        {ligal}
+      </p>
+
+      {isClamped && (
+        <div
+          tabIndex={0}
+          role='button'
+          onClick={() => setIsExpanded((prev) => !prev)}
+          className={cn(
+            'desk-body-regular-l w-max cursor-pointer font-medium text-color-footer transition-colors hover:text-color-white',
+            classes?.ligalButton
+          )}
+        >
+          Подробнее
+        </div>
+      )}
+    </div>
+  )
+}

package/lib/widgets/footer/ui/NavLinks.tsx

@@ -0,0 +1,41 @@
+import type { IFooterNavLinks } from '../model/types'
+import { cn } from '$/shared/utils'
+
+export type TNavigationLinksClasses = {
+  navRoot: string
+  navGroup: string
+  navLabel: string
+  navWrapper: string
+  navLink: string
+}
+
+interface INavLinksProps {
+  navigationLinks: IFooterNavLinks[]
+  classes?: Partial<TNavigationLinksClasses>
+}
+
+export const NavLinks = ({ navigationLinks, classes }: INavLinksProps) => {
+  return (
+    <div className={cn('grid grid-cols-4 gap-10 border-y border-blue-grey-500 py-8 pt-8', classes?.navRoot)}>
+      {navigationLinks?.map(({ groupLabel, links }) => (
+        <div key={groupLabel} className={cn('flex flex-col gap-4', classes?.navGroup)}>
+          <div className={cn('desk-body-regular-m font-medium text-color-white', classes?.navLabel)}>{groupLabel}</div>
+          <div className={cn('flex flex-col gap-2', classes?.navWrapper)}>
+            {links?.map(({ text, href }) => (
+              <a
+                key={text}
+                href={href}
+                className={cn(
+                  'desk-body-regular-m cursor-pointer text-color-white transition-colors hover:text-color-footer',
+                  classes?.navLink
+                )}
+              >
+                {text}
+              </a>
+            ))}
+          </div>
+        </div>
+      ))}
+    </div>
+  )
+}

package/lib/widgets/footer/ui/PhonesBlock.tsx

@@ -0,0 +1,34 @@
+import type { IFooterPhones } from '../model/types'
+import { PhoneView } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+export type TPhoneBlockClasses = {
+  phonesRoot: string
+  phoneWrapper: string
+  phoneText: string
+  phoneLink: string
+}
+
+interface IPhonesBlockProps {
+  phones: IFooterPhones[]
+  classes?: Partial<TPhoneBlockClasses>
+}
+
+export const PhonesBlock = ({ phones, classes }: IPhonesBlockProps) => {
+  return (
+    <div className={cn('flex flex-col items-end gap-4', classes?.phonesRoot)}>
+      {phones?.map(({ phone, text }) => (
+        <PhoneView
+          key={phone}
+          phone={phone}
+          text={text}
+          classes={{
+            wrapper: cn(classes?.phoneWrapper),
+            text: cn('text-color-footer', classes?.phoneText),
+            link: cn('text-color-white', classes?.phoneLink)
+          }}
+        />
+      ))}
+    </div>
+  )
+}

package/lib/widgets/footer/ui/SocialLinks.tsx

@@ -0,0 +1,30 @@
+import type { IFooterSocialLinks } from '../model/types'
+import { Icon } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+export type TSocialLinksClasses = {
+  socialRoot: string
+  socialLink: string
+  socialIcon: string
+}
+
+interface ISocialLinksProps {
+  socialsLinks: IFooterSocialLinks[]
+  classes?: Partial<TSocialLinksClasses>
+}
+
+export const SocialLinks = ({ socialsLinks, classes }: ISocialLinksProps) => {
+  return (
+    <div className={cn('mt-6 flex items-center gap-2', classes?.socialRoot)}>
+      {socialsLinks?.map(({ iconName, href }) => (
+        <a
+          className={cn('flex size-8 items-center justify-center rounded-full bg-[#52576a] p-2', classes?.socialLink)}
+          href={href}
+          key={href}
+        >
+          <Icon name={iconName} className={cn('h-full w-full text-icon-white', classes?.socialIcon)} />
+        </a>
+      ))}
+    </div>
+  )
+}

package/lib/widgets/footer/ui/index.ts

@@ -0,0 +1,5 @@
+export { SocialLinks, type TSocialLinksClasses } from './SocialLinks'
+export { PhonesBlock, type TPhoneBlockClasses } from './PhonesBlock'
+export { NavLinks, type TNavigationLinksClasses } from './NavLinks'
+export { Ligal, type TLigalClasses } from './Ligal'
+export { Copyright, type TCopyrightClasses } from './Copyright'

package/lib/widgets/index.ts

@@ -0,0 +1,5 @@
+export { PageHeader, type TPageHeaderProps } from './pageHeader'
+export { Banner } from './banner'
+export { Advantages, type IAdvantage, type IAdvantagesProps } from './Advantages'
+export { Footer, type IFooterProps } from './footer'
+export { Stepper, type IStepperProps, type ISingleStep } from './stepper'

package/lib/widgets/pageHeader/PageHeader.tsx

@@ -0,0 +1,54 @@
+import { brandLogos, Button, PhoneView, ResponsiveContainer, type TBrandLogoVariant } from '$/shared/ui'
+
+export interface ICommonHeaderProps {
+  logoPath?: string
+  logoType?: TBrandLogoVariant
+}
+interface IHeaderWithPhone extends ICommonHeaderProps {
+  variant: 'withPhone'
+  phone: string
+  phoneText: string
+}
+interface IHeaderWithButton extends ICommonHeaderProps {
+  variant: 'withButton'
+}
+
+export type TPageHeaderProps = IHeaderWithButton | IHeaderWithPhone
+
+const renderContentVariant = (props: TPageHeaderProps) => {
+  switch (props.variant) {
+    case 'withButton':
+      return (
+        <Button intent='secondary' size='sm'>
+          Оформить заявку
+        </Button>
+      )
+    case 'withPhone':
+      const { phone, phoneText } = props as IHeaderWithPhone
+      return <PhoneView phone={phone} text={phoneText} />
+    default:
+      return null
+  }
+}
+
+export const PageHeader = (props: TPageHeaderProps) => {
+  const { logoPath = '/', logoType = 'main' } = props
+
+  return (
+    <header className='flex h-[72px] items-center justify-center bg-color-blue-grey-200'>
+      <ResponsiveContainer>
+        <div className='flex items-center justify-between gap-5'>
+          <a
+            href={logoPath}
+            target='_blank'
+            rel='noreferrer'
+            className='flex items-center justify-center [&_svg]:h-[32px] [&_svg]:w-[192px]'
+          >
+            {brandLogos[logoType]}
+          </a>
+          {renderContentVariant(props)}
+        </div>
+      </ResponsiveContainer>
+    </header>
+  )
+}

package/lib/widgets/pageHeader/index.ts

@@ -0,0 +1 @@
+export { PageHeader, type TPageHeaderProps } from './PageHeader'

package/lib/widgets/stepper/Stepper.tsx

@@ -0,0 +1,43 @@
+import * as React from 'react'
+import { SingleStep, type TSingleStepClasses } from './ui/SingleStep'
+import { Heading, ResponsiveContainer, Section } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+type TStepperClasses = TSingleStepClasses & {
+  root: string
+  headline: string
+  stepsWrapper: string
+}
+
+export interface ISingleStep {
+  title: string
+  description: string | React.ReactElement
+}
+
+export interface IStepperProps {
+  heading: string
+  stepsList: ISingleStep[]
+  classes?: Partial<TStepperClasses>
+}
+
+export const Stepper = ({ heading, stepsList, classes }: IStepperProps) => {
+  return (
+    <Section>
+      <ResponsiveContainer>
+        <div className={cn('flex flex-col gap-12', classes?.root)}>
+          <Heading as='h2' className={cn('text-color-dark', classes?.headline)}>
+            {heading}
+          </Heading>
+          <div
+            className={cn(
+              'flex flex-col items-start gap-6 desktop:flex-row desktop:items-center desktop:gap-12',
+              classes?.stepsWrapper
+            )}
+          >
+            {stepsList?.map((step, index) => <SingleStep key={step.title} index={index + 1} {...step} classes={classes} />)}
+          </div>
+        </div>
+      </ResponsiveContainer>
+    </Section>
+  )
+}

package/lib/widgets/stepper/index.ts

@@ -0,0 +1 @@
+export { Stepper, type IStepperProps, type ISingleStep } from './Stepper'

package/lib/widgets/stepper/ui/SingleStep.tsx

@@ -0,0 +1,42 @@
+import type { ISingleStep } from '../Stepper'
+import { Heading } from '$/shared/ui'
+import { cn } from '$/shared/utils'
+
+export type TSingleStepClasses = {
+  singleStep: string
+  numeric: string
+  textBlock: string
+  title: string
+  description: string
+}
+
+interface ISingleStepProps extends ISingleStep {
+  index: number
+  classes?: Partial<TSingleStepClasses>
+}
+
+export const SingleStep = ({ title, description, index, classes }: ISingleStepProps) => {
+  return (
+    <div
+      className={cn(
+        'mobile:border-color-blue-grey-500 flex w-[328px] max-w-[328px] flex-col gap-6 mobile:rounded-md mobile:border mobile:border-solid mobile:p-4 desktop:w-[348px] desktop:max-w-[348px]',
+        classes?.singleStep
+      )}
+    >
+      <div
+        className={cn(
+          'mob-headline-bold-s flex size-10 items-center justify-center rounded-sm bg-color-blue-grey-500 text-color-white desktop:desk-title-bold-l desktop:size-12',
+          classes?.numeric
+        )}
+      >
+        {index}
+      </div>
+      <div className={cn('flex flex-col gap-4', classes?.textBlock)}>
+        <Heading as='h4' className={cn('text-color-dark', classes?.title)}>
+          {title}
+        </Heading>
+        <p className={cn('desk-body-regular-l text-color-tetriary', classes?.description)}>{description}</p>
+      </div>
+    </div>
+  )
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@scbt-ecom/ui",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "type": "module",
   "exports": {
     "./style.css": "./dist/style.css",
@@ -13,9 +13,6 @@
       "require": "./dist/hybrid.js"
     }
   },
-  "files": [
-    "dist"
-  ],
   "scripts": {
     "dev": "vite",
     "build": "tsc -b && vite build",

package/postcss.config.mjs

@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {}
+  }
+}
+
+export default config

package/public/sprites/arrows.svg

@@ -0,0 +1 @@
+<svg width="0" height="0"><symbol xmlns="http://www.w3.org/2000/svg" id="arrowCircle" fill="none" viewBox="0 0 32 32"><rect width="31" height="31" x=".5" y="31.5" stroke="currentColor" rx="15.5" transform="rotate(-90 .5 31.5)"/><path fill="currentColor" stroke="currentColor" d="M22.707 18.707a1 1 0 0 1-1.414 0L16 13.414l-5.293 5.293a1 1 0 0 1-1.414-1.414l6-6a1 1 0 0 1 1.414 0l6 6a1 1 0 0 1 0 1.414Z"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" id="arrowLink" fill="none" viewBox="0 0 24 24"><path fill="currentColor" d="M8 7a1 1 0 0 1 1-1h8a1 1 0 0 1 1 1v8a1 1 0 1 1-2 0V9.414l-8.293 8.293a1 1 0 0 1-1.414-1.414L14.586 8H9a1 1 0 0 1-1-1Z"/></symbol><symbol xmlns="http://www.w3.org/2000/svg" id="arrowRight" fill="none" viewBox="0 0 16 17"><path fill="currentColor" d="M6.195 13.157a.667.667 0 0 1 0-.943l3.529-3.528-3.529-3.529a.667.667 0 1 1 .943-.943l4 4c.26.26.26.683 0 .943l-4 4a.667.667 0 0 1-.943 0Z"/></symbol></svg>