Merge remote-tracking branch 'origin/main'

# Conflicts: # package.json
ambrosus · Jun 24, 2024 · 33eb16b · 33eb16b
2 parents 27b5e9f + 3dfeaae
commit 33eb16b
Show file tree

Hide file tree

Showing 8 changed files with 59 additions and 14 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@airdao/ui-library",
-  "version": "1.4.20",
+  "version": "1.5.2",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types.d.ts",

diff --git a/src/components/Footer/Footer.tsx b/src/components/Footer/Footer.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import { FooterProps } from './Footer.types';
 import s from './footer.module.css';
 
 import twitterIcon from './assets/twitter-icon.svg';
@@ -18,7 +17,7 @@ const socials = [
   },
   {
     icon: telegramIcon,
-    href: 'https://t.me/airDAO_official',
+    href: 'https://t.me/airdao',
   },
   {
     icon: redditIcon,

diff --git a/src/components/Footer/Footer.types.ts b/src/components/Footer/Footer.types.ts
diff --git a/src/components/Header/Header.module.css b/src/components/Header/Header.module.css
@@ -33,21 +33,24 @@
 }
 
 .header__logo {
+  line-height: 0;
+
   @media screen and (max-width: 1305px) {
     margin-right: auto;
   }
 }
 
 .header__logo img {
-  height: 48px;
+  max-height: 48px;
+  max-width: 160px;
 
   @media screen and (max-width: 1210px) {
-    width: 122px;
+    max-width: 122px;
     margin-right: auto;
   }
 
   @media screen and (max-width: 610px) {
-    width: 100px;
+    max-width: 100px;
   }
 }
 

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -35,6 +35,13 @@ function HeaderBody({
   switchToAmb,
   connector = 'metamask',
   disabled = false,
+  logotype = {
+    src: logo,
+    href: 'https://airdao.io/',
+    width: 'auto',
+    height: 'auto',
+    className: undefined,
+  },
 }: HeaderProps) {
   const [address, setAddress] = useState('');
   const [isMobileNavOpen, setIsMobileNavOpen] = useState(false);
@@ -90,8 +97,20 @@ function HeaderBody({
         className={`${s.header} ${isFixed ? s.header_fixed : ''}`}
         ref={headerRef}
       >
-        <a href='https://airdao.io/' className={s.header__logo}>
-          <img src={logo} width='160' height='34' alt='logo' />
+        <a
+          href={logotype.href || 'https://airdao.io/'}
+          className={
+            logotype.className
+              ? `${logotype.className} ${s.header__logo}`
+              : s.header__logo
+          }
+        >
+          <img
+            src={logotype.src}
+            width={logotype.width || 'auto'}
+            height={logotype.height || 'auto'}
+            alt='logo'
+          />
         </a>
 
         <HeaderNav

diff --git a/src/components/Header/Header.types.ts b/src/components/Header/Header.types.ts
@@ -9,6 +9,15 @@ export interface HeaderProps {
   switchToAmb: () => void;
   connector: 'metamask' | 'walletconnect';
   disabled?: boolean;
+  logotype?: LogoProps;
+}
+
+export interface LogoProps {
+  src: string;
+  href?: string;
+  width?: string | number;
+  height?: string | number;
+  className?: string;
 }
 
 export interface AddressInfoProps {

diff --git a/src/components/TabsRound/TabsRound.tsx b/src/components/TabsRound/TabsRound.tsx
@@ -1,20 +1,35 @@
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import { TabProps, TabsRoundProps } from './TabsRound.types';
 import propTypes from 'prop-types';
 import s from './tabs-round.module.css';
 
-export function TabsRound({ tabsList, onChange, className }: TabsRoundProps) {
-  const [activeTab, setActiveTab] = useState(0);
+export function TabsRound({
+  tabsList,
+  onChange,
+  className,
+  initialTab,
+}: TabsRoundProps) {
+  const [activeTab, setActiveTab] = useState(() => {
+    if (!initialTab) return 0;
+    const initialTabIndex = tabsList.indexOf(initialTab);
+    return initialTabIndex === -1 ? 0 : initialTabIndex;
+  });
 
-  useEffect(() => onChange(tabsList[activeTab]), [activeTab]);
+  const handleTabChange = useCallback(
+    (index: number) => {
+      setActiveTab(index);
+      onChange(tabsList[index]);
+    },
+    [tabsList, onChange, setActiveTab],
+  );
 
   return (
     <div className={`${s.tabs} ${className || ''}`}>
       {tabsList.map((name, index) => (
         <Tab
           name={name}
           isActive={activeTab === index}
-          onClick={() => setActiveTab(index)}
+          onClick={() => handleTabChange(index)}
           key={`${name}-${index}`}
         />
       ))}

diff --git a/src/components/TabsRound/TabsRound.types.ts b/src/components/TabsRound/TabsRound.types.ts
@@ -4,6 +4,7 @@ export interface TabsRoundProps {
   tabsList: string[];
   onChange: (value: string) => void;
   className?: string;
+  initialTab?: string;
 }
 
 export interface TabProps {