freesewing/packages/react/components/LineDrawing/uma.mjs

import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'

/*
 * This strokeScale factor is used to normalize the stroke across
 * designs so we have a consistent look when showing our collection
 */
const strokeScale = 0.5

/**
 * A linedrawing component for Uma
 *
 * @param {object} props - All React props
 * @param {string} props.className - Any CSS classes to apply
 * @param {number} props.stroke - The stroke width to apply
 */
export const Uma = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
    <Front stroke={stroke * strokeScale} />
    <Back stroke={stroke * strokeScale} />
  </LineDrawingWrapper>
)

/**
 * A linedrawing component for the front of Uma
 *
 * @param {object} props - All React props
 * @param {string} props.className - Any CSS classes to apply
 * @param {number} props.stroke - The stroke width to apply
 */
export const UmaFront = ({ className, stroke = 1 }) => (
  <LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
    <Front stroke={stroke * strokeScale} />
  </LineDrawingWrapper>
)

/*
 * React component for the back
 */
export const UmaBack = ({
  className = 'w-64', // CSS classes to apply
  stroke = 1, // Stroke width to use
}) => {
  // Normalize stroke across designs
  stroke = stroke * strokeScale

  return (
    <LineDrawingWrapper viewBox="110 0 110 75" {...{ className, stroke }}>
      <Back stroke={stroke} />
    </LineDrawingWrapper>
  )
}

/*
 * SVG elements for the front
 */
export const Front = ({ stroke }) => (
  <>
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 100.5719,23.435806 -38.537603,46.8512 m 40.870403,-49.1168 c -0.8352,0.1312 -2.0544,0.3808 -2.8,0.5408 -0.396803,0.0832 -0.659203,0.144 -0.659203,0.144 -0.3328,0.1024 -0.7136,0.2208 -1.1392,0.3584 -0.96,0.3072 -2.1344,0.6976 -3.4624,1.1744 -3.2896,1.184 -12.7712,4.656 -19.936,10.3456 -2.0096,1.5968 -3.4592,3.0656 -3.8336,3.4496 -1.0432,1.0688 -5.2544,6.7872 -6.8992,11.1136 -0.8192,2.1504 -1.872,4.912 -2.6848,8.432 -0.784,3.3888 -1.648,8.7872 -1.1488,15.712 M 100.7735,4.2454059 l -3.420803,1.1488 c -0.9856,0.2784 -2.432,0.6816 -4.1824,1.1488 -5.3728,1.4304 -12.5856,3.3504 -20.5312,4.5952001 -4.6912,0.736 -11.1424,1.472 -19.0112,1.5328 h -1.6544 c -7.8656,-0.0608 -14.3168,-0.7968 -19.0112,-1.5328 -7.9456,-1.2448001 -15.1584,-3.1648001 -20.5312,-4.5952001 -1.7504,-0.4672 -3.1967997,-0.8704 -4.1823997,-1.1488 l -3.4208,-1.1488 m 86.9983997,0.4576 c -0.7456,0.0736 -1.4944,0.144 -2.2464,0.2144 -12.9184,1.1904 -25.1808,1.7376 -36.688,1.824 h -0.1792 c -11.504,-0.0864 -23.7696,-0.6336 -36.688,-1.824 -0.752,-0.0704 -1.5008,-0.1408 -2.2464,-0.2144 M 5.0358973,23.435806 43.570297,70.287006 M 2.6998973,21.170206 c 0.8352,0.1312 2.0544,0.3808 2.8,0.5408 0.3968,0.0832 0.6592,0.144 0.6592,0.144 0.3328,0.1024 0.7136,0.2208 1.1392,0.3584 0.96,0.3072 2.1344,0.6976 3.4623997,1.1744 3.2896,1.184 12.7712,4.656 19.936,10.3456 2.0096,1.5968 3.4592,3.0656 3.8336,3.4496 1.0432,1.0688 5.2544,6.7872 6.8992,11.1136 0.8192,2.1504 1.872,4.912 2.6848,8.432 0.784,3.3888 1.648,8.7872 1.1488,15.712"
    />
    <path
      key="outline"
      d="m 40.658297,65.695006 h 2.8224 m 18.6464,0 h 2.8224 M 100.8887,4.9142059 l -3.420803,1.1488 c -0.9856,0.2784 -2.432,0.6816 -4.1824,1.1488 -5.3728,1.4304 -12.5856,3.3504001 -20.5312,4.5952001 -4.6912,0.736 -11.1424,1.472 -19.0112,1.5328 h -1.8816 c -7.8656,-0.0608 -14.3168,-0.7968 -19.0112,-1.5328 -7.9456,-1.2448 -15.1584,-3.1648001 -20.5312,-4.5952001 -1.7504,-0.4672 -3.1967997,-0.8704 -4.1823997,-1.1488 l -3.4208,-1.1488 M 103.2631,20.453406 c -0.7712,0 -4.243203,0.7808 -4.243203,0.7808 -1.0944,0.3392 -2.7072,0.8608 -4.6304,1.5616 -3.312,1.2064 -12.8512,4.7488 -20.0608,10.5472 -2.0224,1.6256 -3.4816,3.1264 -3.8592,3.5168 -1.0496,1.0912 -5.2864,6.9184 -6.944,11.328 -0.8224,2.192 -1.8816,5.008 -2.7008,8.5952 -0.7872,3.4528 -1.6576,8.9568 -1.1584,16.016 m 39.9936,-49.056 -37.6224,45.4752 m 1.0848,-10.0576 h -10.144 -0.192 -10.144 M 100.3959,2.1686059 l -3.420803,1.1488 c -0.9856,0.2784 -2.432,0.6816 -4.1824,1.1488 -5.3728,1.4304 -12.5856,3.3504 -20.5312,4.5952 -4.6912,0.736 -11.1424,1.4720001 -19.0112,1.5328001 h -0.896 c -7.8656,-0.0608 -14.3168,-0.7968001 -19.0112,-1.5328001 -7.9456,-1.2448 -15.1584,-3.1648 -20.5312,-4.5952 -1.7504,-0.4672 -3.1967997,-0.8704 -4.1823997,-1.1488 l -3.4208,-1.1488 M 103.2631,22.962206 c -0.7264,0 -4.000003,0.7424 -4.000003,0.7424 -1.0336,0.3232 -2.5504,0.8192 -4.3648,1.488 -3.12,1.1488 -12.112,4.5184 -18.9088,10.0416 -1.9072,1.5488 -3.2832,2.976 -3.6352,3.3472 -0.9888,1.0368 -4.9824,6.5856 -6.544,10.784 -0.7776,2.0864 -1.776,4.768 -2.544,8.1824 -0.7424,3.2864 -1.5616,8.528 -1.0912,15.248 m -9.2832,-0.1792 h 9.3216 c 0,0 41.228803,-49.8336 41.228803,-49.8336 L 100.3959,2.1686059 c -3.529603,0.2144 -8.217603,0.4992 -11.830403,0.7168 -14.7328,0.8864 -18.3392,1.0816 -22.7648,1.2544 -3.0048,0.1184 -7.456,0.2688 -12.9056,0.3584 h -0.1792 c -5.4528,-0.0896 -9.9008,-0.24 -12.9056,-0.3584 -4.4288,-0.1728 -8.032,-0.368 -22.7648,-1.2544 -3.616,-0.2176 -8.3007997,-0.5024 -11.8303997,-0.7168 l -3.0464,20.6144001 41.2287997,49.8336 h 9.5008 z M 2.3414973,20.453406 c 0.7712,0 4.2432,0.7808 4.2432,0.7808 1.0944,0.3392 2.7072,0.8608 4.6303997,1.5616 3.312,1.2064 12.8512,4.7488 20.0608,10.5472 2.0224,1.6256 3.4816,3.1264 3.8592,3.5168 1.0496,1.0912 5.2864,6.9184 6.944,11.328 0.8224,2.192 1.8816,5.008 2.7008,8.5952 0.7872,3.4528 1.6576,8.9568 1.1584,16.016 m -39.9903997,-49.056 37.6223997,45.4752 m -41.2287997,-46.256 c 0.7264,0 4,0.7424 4,0.7424 1.0336,0.3232 2.5504,0.8192 4.3647997,1.488 3.12,1.1488 12.112,4.5184 18.9088,10.0416 1.9072,1.5488 3.2832,2.976 3.6352,3.3472 0.9888,1.0368 4.9824,6.5856 6.544,10.784 0.7776,2.0864 1.776,4.768 2.544,8.1824 0.7424,3.2864 1.5616,8.528 1.0912,15.248"
    />
  </>
)

/*
 * SVG elements for the back
 */
const Back = ({ stroke }) => (
  <>
    <path
      key="outline"
      d="M 153.82629,65.695006 H 184.0983 M 121.0103,4.6774059 c 3.5616,0.2656 8.2944,0.6144 11.9424,0.8832 14.8704,1.0912 18.512,1.3312 22.9792,1.5456 3.0336,0.144 7.5264,0.3296 13.0272,0.4416 h 0.1824 c 5.504,-0.112 9.9936,-0.2944 13.0272,-0.4416 4.4704,-0.2144 8.1088,-0.4544 22.9792,-1.5456 3.648,-0.2688 8.3808,-0.6176 11.9424,-0.8832 m -98.4096,14.8799901 43.7376,53.05921 m 6.4544,0 h -9.3216 l -41.2288,-49.8336 3.0464,-20.6144001 c 3.5296,0.2144 8.2176,0.4992 11.8304,0.7168 14.7328,0.8864 18.3392,1.0816 22.7648,1.2544 3.0048,0.1184 7.456,0.2688 12.9056,0.3584 h 0.1792 c 5.4528,-0.0896 9.9008,-0.24 12.9056,-0.3584 4.4288,-0.1728 8.032,-0.368 22.7648,-1.2544 3.616,-0.2176 8.3008,-0.5024 11.8304,-0.7168 l 3.0464,20.6144001 -41.2288,49.8336 h -9.3216 c 0,0 -0.1792,0 -0.1792,0 z m 50.19201,-53.05921 -43.37922,53.05921"
    />
    <path
      key="stitches"
      {...dashed(stroke)}
      {...thin(stroke)}
      d="m 120.9175,4.1398059 c 3.5616,0.2656 8.2944,0.6144 11.9424,0.8832 14.8704,1.0912 18.512,1.3312 22.9792,1.5456 3.0336,0.144 7.5264,0.3296 13.0272,0.4416 h 0.1824 c 5.504,-0.112 9.9936,-0.2944 13.0272,-0.4416 4.4704,-0.2144 8.1088,-0.4544 22.9792,-1.5456 3.648,-0.2688 8.3808,-0.6176 11.9424,-0.8832 m -98.3168,16.1344001 42.66241,52.3424 m 57.7216,-51.98401 -42.6624,51.98401"
    />
  </>
)