diff --git a/packages/react/components/Collection/index.mjs b/packages/react/components/Collection/index.mjs index 37a3614bc70..5cda832a298 100644 --- a/packages/react/components/Collection/index.mjs +++ b/packages/react/components/Collection/index.mjs @@ -280,15 +280,19 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => { } return ( - +
{about[name].name}
@@ -303,7 +307,7 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => { className={`tw-flex tw-flex-row tw-items-center tw-justify-center tw-py-1 tw-px-2 tw-rounded-b tw-m-0 tw-w-full ${lineDrawing ? '' : `tw-text-neutral-content`}`} > - +
@@ -316,8 +320,8 @@ const DesignCard = ({ name, lineDrawing = false, linkTo, Link }) => { * @param {object} props - All React props * @param {number} props.score - The difficulty score of the design (1-5) */ -const Difficulty = ({ score = 0 }) => ( -
+const Difficulty = ({ score = 0, className = '' }) => ( +
{[0, 1, 2, 3, 4].map((i) => ( ))} diff --git a/packages/react/components/LineDrawing/benjamin.mjs b/packages/react/components/LineDrawing/benjamin.mjs index 1b6308a3eaf..9a44004452c 100644 --- a/packages/react/components/LineDrawing/benjamin.mjs +++ b/packages/react/components/LineDrawing/benjamin.mjs @@ -5,7 +5,7 @@ import { LineDrawingWrapper, regular, thin } 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 = 1 +const strokeScale = 1.2 /** * A linedrawing component for Benjamin diff --git a/packages/react/components/LineDrawing/bob.mjs b/packages/react/components/LineDrawing/bob.mjs index 366529e4f58..31ec52a8575 100644 --- a/packages/react/components/LineDrawing/bob.mjs +++ b/packages/react/components/LineDrawing/bob.mjs @@ -5,7 +5,7 @@ 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.2 +const strokeScale = 0.15 /** * A linedrawing component for Bob diff --git a/packages/react/components/LineDrawing/charlie.mjs b/packages/react/components/LineDrawing/charlie.mjs index 01a01ea0b17..20b355a8c27 100644 --- a/packages/react/components/LineDrawing/charlie.mjs +++ b/packages/react/components/LineDrawing/charlie.mjs @@ -5,7 +5,7 @@ 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 = 1 +const strokeScale = 1.5 /** * A linedrawing component for Charlie diff --git a/packages/react/components/LineDrawing/cornelius.mjs b/packages/react/components/LineDrawing/cornelius.mjs index 2ac460bc0e2..d2a162c3bbe 100644 --- a/packages/react/components/LineDrawing/cornelius.mjs +++ b/packages/react/components/LineDrawing/cornelius.mjs @@ -5,7 +5,7 @@ import { LineDrawingWrapper, thin, regular, 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 = 1 +const strokeScale = 1.3 /** * A linedrawing component for Cornelius diff --git a/packages/react/components/LineDrawing/lumira.mjs b/packages/react/components/LineDrawing/lumira.mjs index 0f8555dabf7..625aaf17a96 100644 --- a/packages/react/components/LineDrawing/lumira.mjs +++ b/packages/react/components/LineDrawing/lumira.mjs @@ -1,39 +1,38 @@ import React from 'react' import { LineDrawingWrapper, thin, dashed } from './shared.mjs' -const strokeScale = 0.5 - -export const Lumira = ({ - 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 + * This strokeScale factor is used to normalize the stroke across + * designs so we have a consistent look when showing our collection */ -export const LumiraFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +const strokeScale = 0.8 - return ( - - - - ) -} +/** + * A linedrawing component for Lumira + * + * @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 Lumira = ({ className, stroke = 1 }) => ( + + + + +) + +/** + * A linedrawing component for the front of Lumira + * + * @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 LumiraFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/lunetius.mjs b/packages/react/components/LineDrawing/lunetius.mjs index c0aa3562c78..222cc53bf94 100644 --- a/packages/react/components/LineDrawing/lunetius.mjs +++ b/packages/react/components/LineDrawing/lunetius.mjs @@ -1,38 +1,27 @@ import React from 'react' import { LineDrawingWrapper, thin, dashed } from './shared.mjs' -const strokeScale = 0.6 - -export const Lunetius = ({ - 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 + * This strokeScale factor is used to normalize the stroke across + * designs so we have a consistent look when showing our collection */ -export const LunetiusFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +const strokeScale = 1.2 - return ( - - - - ) -} +/** + * A linedrawing component for Lunetius + * + * @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 Lunetius = ({ className, stroke = 1 }) => ( + + + +) + +// Front is the same +export const LunetiusFront = Lunetius /* * SVG elements for the front diff --git a/packages/react/components/LineDrawing/noble.mjs b/packages/react/components/LineDrawing/noble.mjs index 38e9427779c..96bca69bf61 100644 --- a/packages/react/components/LineDrawing/noble.mjs +++ b/packages/react/components/LineDrawing/noble.mjs @@ -1,39 +1,38 @@ import React from 'react' import { LineDrawingWrapper, thin, dashed } from './shared.mjs' -const strokeScale = 0.5 - -export const Noble = ({ - 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 + * This strokeScale factor is used to normalize the stroke across + * designs so we have a consistent look when showing our collection */ -export const NobleFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +const strokeScale = 0.4 - return ( - - - - ) -} +/** + * A linedrawing component for Noble + * + * @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 Noble = ({ className, stroke = 1 }) => ( + + + + +) + +/** + * A linedrawing component for the front of Noble + * + * @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 NobleFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/shared.mjs b/packages/react/components/LineDrawing/shared.mjs index c178683efed..76bb751e418 100644 --- a/packages/react/components/LineDrawing/shared.mjs +++ b/packages/react/components/LineDrawing/shared.mjs @@ -23,7 +23,7 @@ export const LineDrawingWrapper = ({ stroke="currentColor" strokeLinecap="round" strokeLinejoin="round" - className={className + ' linedrawing tw-bg-base-300'} + className={className + ' linedrawing'} style={style} > {children} diff --git a/packages/react/components/LineDrawing/simon.mjs b/packages/react/components/LineDrawing/simon.mjs index 1899d395367..3127c39bd3a 100644 --- a/packages/react/components/LineDrawing/simon.mjs +++ b/packages/react/components/LineDrawing/simon.mjs @@ -1,39 +1,38 @@ 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 + * This strokeScale factor is used to normalize the stroke across + * designs so we have a consistent look when showing our collection */ -export const SimonFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +const strokeScale = 0.15 - return ( - - - - ) -} +/** + * A linedrawing component for Simon + * + * @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 Simon = ({ className, stroke = 1 }) => ( + + + + +) + +/** + * A linedrawing component for the front of Simon + * + * @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 SimonFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/teagan.mjs b/packages/react/components/LineDrawing/teagan.mjs index 98ee99cac58..bec323ad736 100644 --- a/packages/react/components/LineDrawing/teagan.mjs +++ b/packages/react/components/LineDrawing/teagan.mjs @@ -1,39 +1,38 @@ 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 -export const Teagan = ({ - 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 +/** + * A linedrawing component for Teagan + * + * @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 TeaganFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +export const Teagan = ({ className, stroke = 1 }) => ( + + + + +) - return ( - - - - ) -} +/** + * A linedrawing component for the front of Teagan + * + * @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 TeaganFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/tristan.mjs b/packages/react/components/LineDrawing/tristan.mjs index cabc6e4952f..67d0b9b36bd 100644 --- a/packages/react/components/LineDrawing/tristan.mjs +++ b/packages/react/components/LineDrawing/tristan.mjs @@ -1,39 +1,38 @@ import React from 'react' import { LineDrawingWrapper, regular } 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 -export const Tristan = ({ - 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 +/** + * A linedrawing component for Tristan + * + * @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 TristanFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +export const Tristan = ({ className, stroke = 1 }) => ( + + + + +) - return ( - - - - ) -} +/** + * A linedrawing component for the front of Tristan + * + * @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 TristanFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/uma.mjs b/packages/react/components/LineDrawing/uma.mjs index d685c64ad8d..b56ed112c23 100644 --- a/packages/react/components/LineDrawing/uma.mjs +++ b/packages/react/components/LineDrawing/uma.mjs @@ -1,39 +1,38 @@ 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 -export const Uma = ({ - 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 +/** + * 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 UmaFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +export const Uma = ({ className, stroke = 1 }) => ( + + + + +) - return ( - - - - ) -} +/** + * 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 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/umbra.mjs b/packages/react/components/LineDrawing/umbra.mjs index 601f7d95208..a1c4f73be3c 100644 --- a/packages/react/components/LineDrawing/umbra.mjs +++ b/packages/react/components/LineDrawing/umbra.mjs @@ -1,39 +1,38 @@ 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 -export const Umbra = ({ - 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 +/** + * A linedrawing component for Umbra + * + * @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 UmbraFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +export const Umbra = ({ className, stroke = 1 }) => ( + + + + +) - return ( - - - - ) -} +/** + * A linedrawing component for the front of Umbra + * + * @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 UmbraFront = ({ className, stroke = 1 }) => ( + + + +) /* * React component for the back diff --git a/packages/react/components/LineDrawing/wahid.mjs b/packages/react/components/LineDrawing/wahid.mjs index c8db87d0d5f..1075eb208aa 100644 --- a/packages/react/components/LineDrawing/wahid.mjs +++ b/packages/react/components/LineDrawing/wahid.mjs @@ -1,36 +1,38 @@ import React from 'react' import { LineDrawingWrapper, thin, dashed } from './shared.mjs' -const strokeScale = 0.4 +/* + * 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 -export const Wahid = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale +/** + * A linedrawing component for Wahid + * + * @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 Wahid = ({ className, stroke = 1 }) => ( + + + + +) - return ( - - - - - ) -} - -export const WahidFront = ({ - className = 'w-64', // CSS classes to apply - stroke = 1, // Stroke width to use -}) => { - // Normalize stroke across designs - stroke = stroke * strokeScale - - return ( - - - - ) -} +/** + * A linedrawing component for the front of Wahid + * + * @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 WahidFront = ({ className, stroke = 1 }) => ( + + + +) export const WahidBack = ({ className = 'w-64', // CSS classes to apply