packages/bar/examples/BasicUsageExample.tsx - develop - kaws/ui-kit-ce

packages/bar/examples/BasicUsageExample.tsx
74 строки4 KB
Строганов Федор Юрьевич
docs: доработана документация Storybook
04 мар 2025, 16:28
04 мар 2025, 16:2828abce0
import React from 'react'
import { Bar, BarButton } from '@v-uik/bar'

interface IconProps extends React.SVGAttributes<SVGElement> {}

const svgPath =
  'M22.5 4.5H1.5V6H22.5V4.5ZM22.5 9H1.5V10.5H22.5V9ZM1.5 13.5H22.5V15H1.5V13.5ZM22.5 18H1.5V19.5H22.5V18Z'

const IconBurger: React.FC<IconProps> = ({
  width = 24,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 24 24"
    >
      <path d={svgPath} fillRule="evenodd" />
    </svg>
  )
}

IconBurger.displayName = 'IconBurger'

const PlatformVFirstSvgPath =
  'M95.5976 11.9639C95.5976 16.3867 98.4236 19.0169 102.663 19.0169C106.958 19.0169 109.728 16.1139 109.728 12.0029C109.728 7.59959 106.902 4.96931 102.663 4.94983C98.3672 4.94983 95.5976 7.85288 95.5976 11.9639ZM98.0847 11.9834C98.0847 9.1388 99.8179 7.20991 102.644 7.19044C105.658 7.20991 107.241 9.31414 107.241 11.9834C107.241 14.8475 105.489 16.7763 102.682 16.7763C99.6673 16.7568 98.0847 14.6526 98.0847 11.9834ZM40.5077 14.5552C44.37 14.5552 46.4424 12.9576 46.4424 9.78175C46.4424 6.70335 44.6715 5.16415 40.5077 5.16415H36.118V18.8026H38.473V14.5552H40.5077ZM40.715 7.40475C43.0134 7.40475 43.9933 8.04772 43.9933 9.72329C43.9933 11.5742 42.8628 12.3146 40.6773 12.3146H38.473V7.40475H40.715ZM51.389 5.16415H49.0339V18.8026H58.5484V16.562H51.389V5.16415ZM64.7429 5.16415H67.4182L72.8442 18.8026H70.3384L69.076 15.5684H63.0284L61.785 18.8026H59.3921L64.7429 5.16415ZM66.0427 7.73598L63.8762 13.3277H68.2095L66.0427 7.73598ZM83.0788 5.16415H71.9065V7.40475H76.2774V18.8026H78.6325V7.40475H83.0788V5.16415ZM87.4138 11.243H93.8573V13.4836H87.4138V18.8026H85.0589V5.16415H94.1588V7.40475H87.4138V11.243ZM123.181 18.8026H120.355L117.529 14.4968C117.152 14.5357 116.775 14.5552 116.361 14.5552H114.552V18.8026H112.197V5.16415H116.361C120.525 5.16415 122.296 6.70335 122.296 9.78175C122.296 11.8275 121.448 13.2108 119.809 13.9512L123.181 18.8026ZM119.846 9.72329C119.846 8.04772 118.867 7.40475 116.568 7.40475H114.552V12.3146H116.53C118.716 12.3146 119.846 11.5742 119.846 9.72329ZM137.577 18.8026H139.932V5.16415H137.144L132.81 12.5874L128.439 5.16415H125.463V18.8026H127.818V8.65169L132.151 15.8021H133.338L137.577 8.55429V18.8026ZM159.789 5.16415L154.438 18.8026H152.102L146.676 5.16415H149.201L153.308 15.8021L157.396 5.16415H159.789Z'
const PlatformVSecondSvgPath =
  'M13.6403 5.51965L11.5864 3.39556L19.0646 0L21.1185 2.12404L21.1186 2.12391L23.1726 4.248L19.8891 11.9815L17.8351 9.8574L21.1185 2.12414L13.6403 5.51965ZM11.5862 3.39563L9.53222 5.51972L2.05407 2.1242L5.33746 9.85747L3.28348 11.9816L0 4.24807L2.05398 2.12398L2.05404 2.12412L4.10797 7.04252e-05L11.5862 3.39563ZM17.8349 14.106L19.8889 11.9819L23.1723 19.7154L21.1184 21.8395L21.1183 21.8394L19.0644 23.9633L11.5862 20.5679L13.6402 18.4438L21.1183 21.8393L17.8349 14.106ZM3.28358 11.9815L5.33756 14.1056L2.05419 21.8389L2.05408 21.8391L0.0001013 19.715L3.28358 11.9815ZM2.05419 21.8389L4.10816 23.9631L11.5864 20.5674L9.5324 18.4434L2.05419 21.8389Z'

const LogoPlatformV: React.FC<IconProps> = ({
  width = 160,
  height = 24,
  fill = 'currentColor',
  ...props
}) => {
  return (
    <svg
      width={width}
      height={height}
      fill={fill}
      {...props}
      viewBox="0 0 160 24"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path fillRule="evenodd" clipRule="evenodd" d={PlatformVFirstSvgPath} />
      <path fillRule="evenodd" clipRule="evenodd" d={PlatformVSecondSvgPath} />
    </svg>
  )
}

LogoPlatformV.displayName = 'LogoPlatformV'

export const BasicUsageExample = (): JSX.Element => {
  return (
    <div style={{ height: '24px' }}>
      <div style={{ position: 'absolute', inset: '10px 6px' }}>
        <Bar style={{ position: 'absolute' }}>
          <BarButton icon={<IconBurger />} />
          <LogoPlatformV
            style={{
              margin: '12px 16px',
              fill: 'white',
            }}
          />
        </Bar>
      </div>
    </div>
  )
}