diff options
| author | Armand Philippot <git@armandphilippot.com> | 2023-10-07 18:44:14 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2023-11-11 18:14:41 +0100 |
| commit | d75b9a1e150ab211c1052fb49bede9bd16320aca (patch) | |
| tree | e5bb221d2b8dc83151697fe646e9194f921b5807 /src/components/organisms/toolbar | |
| parent | 12a03a9a72f7895d571dbaeeb245d92aa277a610 (diff) | |
feat(components): add a generic Flip component
The flipping animation is used at several places so it makes sense to
use a single component to handle the animation. It will avoid styles
duplication.
Diffstat (limited to 'src/components/organisms/toolbar')
| -rw-r--r-- | src/components/organisms/toolbar/search.tsx | 7 | ||||
| -rw-r--r-- | src/components/organisms/toolbar/settings.tsx | 7 |
2 files changed, 6 insertions, 8 deletions
diff --git a/src/components/organisms/toolbar/search.tsx b/src/components/organisms/toolbar/search.tsx index a09bdae..6a33aff 100644 --- a/src/components/organisms/toolbar/search.tsx +++ b/src/components/organisms/toolbar/search.tsx @@ -62,13 +62,12 @@ const SearchWithRef: ForwardRefRenderFunction<HTMLDivElement, SearchProps> = ( value="open" /> <FlippingLabel - aria-label={label} className={sharedStyles.label} htmlFor="search-button" + icon={<Icon aria-hidden={true} shape="magnifying-glass" size="lg" />} isActive={isActive} - > - <Icon aria-hidden={true} shape="magnifying-glass" size="lg" /> - </FlippingLabel> + label={label} + /> <SearchModal className={`${sharedStyles.modal} ${searchStyles.modal} ${className}`} ref={searchInputRef} diff --git a/src/components/organisms/toolbar/settings.tsx b/src/components/organisms/toolbar/settings.tsx index 53634d8..b7625aa 100644 --- a/src/components/organisms/toolbar/settings.tsx +++ b/src/components/organisms/toolbar/settings.tsx @@ -54,13 +54,12 @@ const SettingsWithRef: ForwardRefRenderFunction< value="open" /> <FlippingLabel - aria-label={label} className={styles.label} htmlFor="settings-button" + icon={<Icon aria-hidden={true} shape="cog" size="lg" />} isActive={isActive} - > - <Icon aria-hidden={true} shape="cog" size="lg" /> - </FlippingLabel> + label={label} + /> <SettingsModal ackeeStorageKey={ackeeStorageKey} className={`${styles.modal} ${className}`} |