diff --git a/src/pages/Collection/AvailableArtworkBanner.tsx b/src/pages/Collection/AvailableArtworkBanner.tsx new file mode 100644 index 0000000..547c7c9 --- /dev/null +++ b/src/pages/Collection/AvailableArtworkBanner.tsx @@ -0,0 +1,80 @@ +import { useState } from 'react'; +import { TimesSvg } from 'components'; +import { ExternalLink, ExternalUrl } from 'router'; +import { + colors, + focusOutlineCSS, + getRems, + media, + unstyledButtonCSS, +} from 'styles'; +import { styled, Paragraph } from '../shared'; + +const AvailableArtworkBanner = () => { + const [didDismiss, setDidDismiss] = useState(false); + + if (didDismiss) return null; + + return ( + + + For available artwork contact:{' '} + + J. Kenneth Fine Art + + + setDidDismiss(true)} /> + + ); +}; + +const Wrapper = styled.aside` + align-items: center; + background-color: #faf4f1; // shade of colors.lightRed + border: 1px solid ${colors.lightRed}; + border-radius: 6px; + display: flex; + flex-direction: row; + justify-content: center; + margin-bottom: 16px; + padding: 8px; + position: relative; + + p { + display: flex; + flex-direction: column; + line-height: 1.5; + text-align: center; + + ${media.md` + flex-direction: row; + gap: 6px; + `} + } +`; + +const DismissIcon = styled(TimesSvg)` + height: ${getRems(20)}; +`; + +const Dismiss = styled.button.attrs({ + 'aria-label': 'Dismiss banner', + children: , + title: 'Dismiss banner', +})` + ${unstyledButtonCSS} + color: ${colors.lightGray}; + position: absolute; + right: 16px; + + &:hover, + &:focus { + color: ${colors.darkGray}; + } + + &:focus { + ${focusOutlineCSS} + } +`; + +export default AvailableArtworkBanner; diff --git a/src/pages/Collection/index.tsx b/src/pages/Collection/index.tsx index e30d6b9..8d45aed 100644 --- a/src/pages/Collection/index.tsx +++ b/src/pages/Collection/index.tsx @@ -15,6 +15,7 @@ import { HEADING_WRAPPER_MARGIN_BOTTOM_PX } from './consts'; import Loader from './Loader'; import { SlideProvider, SlideToggle, Slide } from './slide'; import { useFilterState, Filters } from './filter'; +import AvailableArtworkBanner from './AvailableArtworkBanner'; import FilterToggleIntroTooltip from './FilterToggleIntroTooltip'; import List from './List'; import ScrollToTop from './ScrollToTop'; @@ -78,6 +79,7 @@ export const Collection = () => { if (collectionIsLoading || !collection) return ( + Collection @@ -88,6 +90,7 @@ export const Collection = () => { return ( <> + Collection {count}