import React from 'react'
import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.35
export const Simon = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
)
}
/*
* React component for the front
*/
export const SimonFront = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
)
}
/*
* React component for the back
*/
export const SimonBack = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
}) => {
// Normalize stroke across designs
stroke = stroke * strokeScale
return (
)
}
/*
* Always use an id for defs that is unique to the design because if we have
* multiple linedrawings on the page, they share the same namespace and thus
* IDs will collide
*/
const defs = (
)
/*
* SVG elements for the back
*/
const Front = ({ stroke }) => (
<>
{defs}
)
/*
* SVG elements for the back
*/
const Back = ({ stroke }) => (
<>
)