mirror of
https://github.com/MetaFam/TheGame.git
synced 2026-04-24 03:00:09 -04:00
317ba7c9e5
* incorporating configuration panes from #1078 * standardizing player hero subcomponents & removing `owner` var from `useProfileField` 🚪 * switching box type, ambiguating overly-specific names, & massaging heights 📱 * reordering profile details sections, updating deployment environment, & conditionally wrapping the hero elements 🎬 * fixing render of color disposition selector 🕍 * self code review changes: removed some `;`s 🎋 * getting yarn typecheck && yarn lint to pass post rebase 🏇🏾 * handling "missing <div> in <button>" error with mounted check & setting HTTP return codes for OpenSea API endpoint 🕺 * `ProfileWizard` extends `Wizard`, roles display better on mobile, & pronouns use `ProfileWizardPane` 🍊 * properly encapsulating ETH address regex 🚲 * adding some tasks 🏥 * fixed skills layou * handling default values? ❔ * corrections for revision comments from @dan13ram (UI bugs to follow) 🌋 * cleaning up memberships & explorer type 🧫 * refactoring player roles configuration and display to use `WizardPane` 🔮 * bunches of mobile fixes & repairing the display of deserialized skills 📟 * removing redirect in static props & formatting memberships display for responsiveness 🪆 * improving comprehensability of `/me` & more mobile tweaking 🍦 * various spacing fixes & a “try again” button for connecting 🫕 * maybe fixed issue with saving images for fields with default values 🇩🇿 * switched roles selection to a bounded `SimpleGrid` to fix sizing weirdness 🧰 * fix: removed verify on brightId button * fix: clean up username page * formatting & fixing skills issues 🥩 * reformatting NFT display 🚂 * adding `/join` 🚉 * style: peth's suggestions * added mainnet required message * style: slight tweak of megamenu item positions * chore(release): 0.2.0 Co-authored-by: tenfinney <scott@1box.onmicrosoft.com> Co-authored-by: dan13ram <dan13ram@gmail.com> Co-authored-by: vidvidvid <weetopol@gmail.com>
77 lines
2.1 KiB
TypeScript
77 lines
2.1 KiB
TypeScript
import {
|
||
Input,
|
||
InputGroup,
|
||
InputLeftElement,
|
||
InputRightAddon,
|
||
Text,
|
||
} from '@metafam/ds';
|
||
import React from 'react';
|
||
|
||
import { ProfileWizardPane } from './ProfileWizardPane';
|
||
import { WizardPaneCallbackProps } from './WizardPane';
|
||
|
||
export const SetupAvailability: React.FC = () => {
|
||
const field = 'availableHours';
|
||
|
||
return (
|
||
<ProfileWizardPane
|
||
{...{ field }}
|
||
title="Avail­ability"
|
||
prompt="What is your weekly availability for any kind of freelance work?"
|
||
>
|
||
{({ register, errored = false }: WizardPaneCallbackProps) => {
|
||
const { ref: registerRef, ...props } = register(field, {
|
||
valueAsNumber: true,
|
||
min: {
|
||
value: 0,
|
||
message: 'It’s not possible to be available for negative time.',
|
||
},
|
||
max: {
|
||
value: 24 * 7,
|
||
message: `There’s only ${24 * 7} hours in a week.`,
|
||
},
|
||
});
|
||
|
||
return (
|
||
<InputGroup
|
||
mb={10}
|
||
maxW="10rem"
|
||
margin="auto"
|
||
borderColor="purple.700"
|
||
sx={{
|
||
':hover, :focus-within': {
|
||
borderColor: errored ? 'red' : 'white',
|
||
},
|
||
}}
|
||
>
|
||
<InputLeftElement>
|
||
<Text as="span" role="img" aria-label="clock">
|
||
🕛
|
||
</Text>
|
||
</InputLeftElement>
|
||
<Input
|
||
type="number"
|
||
placeholder="23…"
|
||
pl={9}
|
||
background="dark"
|
||
borderTopEndRadius={0}
|
||
borderBottomEndRadius={0}
|
||
borderRight={0}
|
||
_focus={errored ? { borderColor: 'red' } : undefined}
|
||
autoFocus
|
||
ref={(ref) => {
|
||
ref?.focus();
|
||
registerRef(ref);
|
||
}}
|
||
{...props}
|
||
/>
|
||
<InputRightAddon bg="purpleBoxDark" color="white">
|
||
<Text as="sup">hr</Text> ⁄ <Text as="sub">week</Text>
|
||
</InputRightAddon>
|
||
</InputGroup>
|
||
);
|
||
}}
|
||
</ProfileWizardPane>
|
||
);
|
||
};
|