feat: 🎸 multi collection onboarding ui

package.json

@@ -14,9 +14,10 @@
     "@radix-ui/react-checkbox": "^0.1.4",
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
-    "@radix-ui/react-hover-card": "^0.1.3",
+    "@radix-ui/react-hover-card": "^0.1.5",
     "@radix-ui/react-icons": "^1.0.3",
     "@radix-ui/react-popover": "^0.1.6",
+    "@radix-ui/react-radio-group": "^1.0.0",
     "@radix-ui/react-switch": "^0.1.5",
     "@radix-ui/react-tabs": "^0.1.4",
     "@radix-ui/react-toast": "^0.1.1",

src/App.tsx

@@ -9,6 +9,8 @@ import { useTheme } from './hooks/use-theme';
 import { portalZIndexGlobals } from './utils/styles';
 import { ThemeRootElement } from './constants/common';
 import { useThemeGlobals } from './hooks';
+import Onboarding from './components/onboarding/onboarding-ui';
+import ExploreCollections from './components/collections/explore-collections';
 
 const App = () => {
   const [theme, themeObject] = useTheme();
@@ -31,6 +33,11 @@ const App = () => {
             path="/activity/:id"
             element={<UserActivityView />}
           />
+          <Route path="/create" element={<Onboarding />} />
+          <Route
+            path="/collections"
+            element={<ExploreCollections />}
+          />
         </Routes>
       </BrowserRouter>
       <ToastHandler />

src/components/collections/explore-collections.tsx

@@ -0,0 +1,122 @@
+import { useTranslation } from 'react-i18next';
+import banner from '../../assets/collection-list-placeholder.png';
+import bannerOne from '../../assets/collection-list-placeholder(1).png';
+import bannerTwo from '../../assets/collection-list-placeholder(2).png';
+import bannerThree from '../../assets/collection-list-placeholder(3).png';
+import logo from '../../assets/collection-list-sub-placeholder.png';
+import logoOne from '../../assets/collection-list-sub-placeholder(1).png';
+import logoTwo from '../../assets/collection-list-sub-placeholder(2).png';
+import logoThree from '../../assets/collection-list-sub-placeholder(3).png';
+import { CollectionFilterDropdown } from '../core/dropdown/collection-filter-dropdown';
+import {
+  ExploreCollectionsContainer,
+  ExploreCollectionsWrapper,
+  Flex,
+  Heading,
+  SubText,
+  CollectionsContainer,
+  CollectionContainer,
+  BannerImage,
+  LogoImageWrapper,
+  LogoImage,
+  CollectionDataWrapper,
+  CollectionData,
+  OwnerText,
+} from './styles';
+
+const ExploreCollections = () => {
+  const { t } = useTranslation();
+
+  return (
+    <ExploreCollectionsContainer>
+      <ExploreCollectionsWrapper>
+        <Flex>
+          <div>
+            <Heading>
+              {t('translation:collections.exploreCollections.exploreCollectionTitle')}
+            </Heading>
+            <SubText>
+              {t('translation:collections.exploreCollections.description')}
+            </SubText>
+          </div>
+          <CollectionFilterDropdown />
+        </Flex>
+        <CollectionsContainer>
+          {collections.map((collection) => (
+            <CollectionContainer>
+              <div>
+                <BannerImage src={collection.banner} />
+              </div>
+              <CollectionDataWrapper>
+                <LogoImageWrapper>
+                  <LogoImage src={collection.logo} />
+                </LogoImageWrapper>
+                <CollectionData>
+                  <SubText size="sm" color="primary" font="bold">
+                    {collection.name}
+                  </SubText>
+                  <SubText size="sm" height="small">
+                    By <OwnerText>{collection.owner}</OwnerText>
+                  </SubText>
+                </CollectionData>
+              </CollectionDataWrapper>
+            </CollectionContainer>
+          ))}
+        </CollectionsContainer>
+      </ExploreCollectionsWrapper>
+    </ExploreCollectionsContainer>
+  );
+};
+
+export default ExploreCollections;
+
+const collections = [
+  {
+    banner: bannerOne,
+    logo: logoOne,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: bannerTwo,
+    logo: logoTwo,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: banner,
+    logo: logo,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: bannerThree,
+    logo: logoThree,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: bannerTwo,
+    logo: logoTwo,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: banner,
+    logo: logo,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: bannerThree,
+    logo: logoThree,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+  {
+    banner: bannerOne,
+    logo: logoOne,
+    name: 'Chubbicorns',
+    owner: 'rgblt...whfy',
+  },
+];

src/components/collections/index.ts

@@ -0,0 +1 @@
+export * from './explore-collections';

src/components/collections/styles.ts

@@ -0,0 +1,107 @@
+import { styled, keyframes } from '../../stitches.config';
+
+export const ExploreCollectionsContainer = styled('div', {
+  display: 'flex',
+  justifyContent: 'center',
+  paddingTop: '160px',
+});
+
+export const ExploreCollectionsWrapper = styled('div', {
+  width: '1100px',
+});
+
+export const Flex = styled('div', {
+  display: 'flex',
+  justifyContent: 'space-between',
+  alignItems: 'center',
+});
+
+export const Heading = styled('h1', {
+  margin: '0 0 8px',
+  fontStyle: 'normal',
+  fontWeight: '700',
+  fontSize: '32px',
+  lineHeight: '32px',
+  color: '$mainTextColor',
+});
+
+export const SubText = styled('p', {
+  margin: '0',
+  fontStyle: 'normal',
+  fontWeight: '400',
+  fontSize: '16px',
+  lineHeight: '27px',
+  color: '$textNeutralColor',
+
+  variants: {
+    size: {
+      sm: {
+        fontSize: '15px',
+      },
+    },
+    color: {
+      primary: {
+        color: '$mainTextColor',
+      },
+    },
+    font: {
+      bold: {
+        fontWeight: '600',
+      },
+    },
+    height: {
+      small: {
+        lineHeight: '24px',
+      },
+    },
+  },
+});
+
+export const OwnerText = styled('span', {
+  color: '$primary',
+});
+
+export const CollectionsContainer = styled('div', {
+  display: 'grid',
+  gridTemplateColumns: '1fr 1fr 1fr 1fr',
+  marginTop: '40px',
+  flexWrap: 'wrap',
+});
+
+export const CollectionContainer = styled('div', {
+  width: '260px',
+  marginRight: '20px',
+  marginBottom: '25px',
+  background: '$backgroundColor',
+  borderRadius: '14px',
+  boxShadow: '0px 0px 8px #E6E9EF',
+
+  '&:nth-child(4)': {
+    marginRight: 'unset',
+  },
+});
+
+export const BannerImage = styled('img', {
+  width: '100%',
+  borderTopRightRadius: '14px',
+  borderTopLeftRadius: '14px',
+});
+
+export const LogoImageWrapper = styled('div', {
+  position: 'relative',
+  left: '10px',
+  top: '-20px',
+});
+
+export const LogoImage = styled('img', {
+  width: '80px',
+  height: '80px',
+});
+
+export const CollectionDataWrapper = styled('div', {
+  display: 'flex',
+});
+
+export const CollectionData = styled('div', {
+  marginLeft: '20px',
+});

src/components/core/accordions/collection-accordion.tsx

@@ -0,0 +1,45 @@
+import { useState } from 'react';
+import * as Accordion from '@radix-ui/react-accordion';
+import {
+  AccordionStyle,
+  AccordionTrigger,
+  AccordionContent,
+  CollectionAccordionTitle,
+} from './styles';
+import { Icon } from '../../icons';
+import { useTranslation } from 'react-i18next';
+
+export const CollectionAccordion = () => {
+  const { t } = useTranslation();
+  const [isAccordionOpen, setIsAccordionOpen] = useState(true);
+
+  return (
+    <AccordionStyle
+      type="single"
+      collapsible
+      backgroundColor={isAccordionOpen ? 'notopen' : 'open'}
+      width="small"
+      className="checkbox-accordian"
+      marginless="bottom"
+    >
+      <Accordion.Item value="">
+        <AccordionTrigger
+          padding="large"
+          backgroundColor="none"
+          borderTop="none"
+          onClick={() => setIsAccordionOpen(!isAccordionOpen)}
+        >
+          <CollectionAccordionTitle>
+            {t('translation:onboarding.nftCollection')}
+          </CollectionAccordionTitle>
+          <Icon
+            icon="chevron-down"
+            rotate={!isAccordionOpen}
+            size="sm"
+          />
+        </AccordionTrigger>
+        <AccordionContent padding="small"></AccordionContent>
+      </Accordion.Item>
+    </AccordionStyle>
+  );
+};

src/components/core/accordions/styles.ts

@@ -35,6 +35,11 @@ export const AccordionStyle = styled(Accordion.Root, {
         maxWidth: '670px',
       },
     },
+    marginless: {
+      bottom: {
+        marginBottom: '0px',
+      },
+    },
   },
 });
 
@@ -234,6 +239,10 @@ export const AccordionTrigger = styled(Accordion.Trigger, {
       medium: {
         padding: '25px 25px',
       },
+      large: {
+        padding: '0px 15px 0px 50px',
+        height: '44px',
+      },
     },
     borderTop: {
       none: {
@@ -482,3 +491,11 @@ export const ItemCount = styled('span', {
   alignItems: 'center',
   color: '$checkboxSelectedFiltersText',
 });
+
+export const CollectionAccordionTitle = styled('p', {
+  fontStyle: 'normal',
+  fontWeight: '400',
+  fontSize: '12px',
+  lineHeight: '16px',
+  color: '$textNeutralColor',
+});

src/components/core/buttons/styles.ts

@@ -52,9 +52,9 @@ export const Button = styled('button', {
         border: '1.5px solid $primary',
       },
       active: {
-        background: 'rgba(34, 83, 255, 0.12)',
+        background: 'rgba(34, 83, 255, 0.16)',
         color: '$primary',
-        border: '1.5px solid $primary',
+        border: 'none',
       },
     },