feat: add available artwork banner to collection page

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<boolean>(false);
+
+  if (didDismiss) return null;
+
+  return (
+    <Wrapper>
+      <Paragraph className="fs-6 m-0">
+        <span>For available artwork contact:</span>{' '}
+        <ExternalLink href={ExternalUrl.JKenneth}>
+          J. Kenneth Fine Art
+        </ExternalLink>
+      </Paragraph>
+      <Dismiss onClick={() => setDidDismiss(true)} />
+    </Wrapper>
+  );
+};
+
+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: <DismissIcon />,
+  title: 'Dismiss banner',
+})`
+  ${unstyledButtonCSS}
+  color: ${colors.lightGray};
+  position: absolute;
+  right: 16px;
+
+  &:hover,
+  &:focus {
+    color: ${colors.darkGray};
+  }
+
+  &:focus {
+    ${focusOutlineCSS}
+  }
+`;
+
+export default AvailableArtworkBanner;

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 (
             <LoadingWrapper>
+              <AvailableArtworkBanner />
               <Heading className="mb-4">Collection</Heading>
               <Loader />
             </LoadingWrapper>
@@ -88,6 +90,7 @@ export const Collection = () => {
         return (
           <>
             <SlideProvider checkIsOutsideClick={checkIsOutsideClick}>
+              <AvailableArtworkBanner />
               <HeadingWrapper>
                 <Heading className="mb-0">Collection</Heading>
                 <HeadingCount>{count}</HeadingCount>