feat: initial Pezkuwi Apps rebrand from polkadot-apps

Rebranded terminology:
- Polkadot → Pezkuwi
- Kusama → Dicle
- Westend → Zagros
- Rococo → PezkuwiChain
- Substrate → Bizinikiwi
- parachain → teyrchain

Custom logos with Kurdistan brand colors (#e6007a → #86e62a):
- bizinikiwi-hexagon.svg
- sora-bizinikiwi.svg
- hezscanner.svg
- heztreasury.svg
- pezkuwiscan.svg
- pezkuwistats.svg
- pezkuwiassembly.svg
- pezkuwiholic.svg

packages/react-components/src/Tabs/CurrentSection.tsx

@@ -0,0 +1,48 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { IconName } from '@fortawesome/fontawesome-svg-core';
+
+import React from 'react';
+
+import Icon from '../Icon.js';
+import { styled } from '../styled.js';
+
+interface Props {
+  className?: string;
+  icon: IconName;
+  text: string;
+}
+
+function CurrentSection ({ className = '', icon, text }: Props): React.ReactElement<Props> {
+  return (
+    <StyledDiv className={`${className} active-tab`}>
+      <Icon icon={icon} />
+      <span>{text}</span>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  margin: 0 2.5rem 0 1.5rem;
+  font-weight: var(--font-weight-normal);
+  font-size: var(--font-size-base);
+  line-height: 1.57rem;
+  min-width: max-content;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  color: var(--color-text);
+
+  .ui--Icon {
+    margin-right: 0.85rem;
+    max-width: 1rem;
+    max-height: 1rem;
+  }
+
+  @media only screen and (max-width: 900px) {
+    margin: 0 1.5rem;
+  }
+`;
+
+export default React.memo(CurrentSection);

packages/react-components/src/Tabs/Tab.tsx

@@ -0,0 +1,101 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { TabItem } from '../types.js';
+
+import React from 'react';
+import { NavLink } from 'react-router-dom';
+
+import Badge from '../Badge.js';
+import { styled } from '../styled.js';
+
+interface Props extends TabItem {
+  basePath: string;
+  className?: string;
+  count?: number;
+  index: number;
+}
+
+function Tab ({ basePath, className = '', count, hasParams, index, isExact, isRoot, name, text }: Props): React.ReactElement<Props> {
+  const to = isRoot
+    ? basePath
+    : `${basePath}/${name}`;
+
+  // only do exact matching when not the fallback (first position tab),
+  // params are problematic for dynamic hidden such as app-accounts
+  const tabIsExact = isExact || !hasParams || index === 0;
+
+  return (
+    <StyledNavLink
+      className={`${className} ui--Tab`}
+      end={tabIsExact}
+      to={to}
+    >
+      <div className='tabLinkText'>
+        {text}
+      </div>
+      {!!count && (
+        <Badge
+          className='tabCounter'
+          color='counter'
+          info={count}
+        />
+      )}
+    </StyledNavLink>
+  );
+}
+
+const StyledNavLink = styled(NavLink)`
+  align-items: center;
+  display: flex;
+  color: #8B8B8B;
+  height: 100%;
+  padding: 0 1.5rem;
+  position: relative;
+
+  &:hover {
+    color: #8B8B8B;
+
+    .tabLinkText::after {
+      background-color: #8B8B8B;
+    }
+  }
+
+  &.active, &:hover {
+    .tabLinkText::after {
+      content: '';
+      position: absolute;
+      width: 3.14rem;
+      height: 2px;
+      bottom: -2px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+  }
+
+  &.active {
+    color: var(--color-text) !important;
+    font-weight: var(--font-weight-normal);
+
+    &:hover {
+      cursor: default;
+    }
+  }
+
+  .tabLinkText {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+
+  .tabCounter {
+    margin: -1rem 0 -1rem 0.75rem;
+  }
+
+  .tabIcon {
+    margin-left: 0.75rem;
+  }
+`;
+
+export default React.memo(Tab);

packages/react-components/src/Tabs/TabsSectionDelimiter.tsx

@@ -0,0 +1,37 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+
+import { styled } from '../styled.js';
+
+interface TabsSectionDelimiterProps {
+  className?: string;
+}
+
+function TabsSectionDelimiter ({ className = '' }: TabsSectionDelimiterProps): React.ReactElement {
+  return (
+    <StyledDiv className={className}>
+      <svg
+        fill='none'
+        height='47'
+        viewBox='0 0 17 65'
+        width='17'
+        xmlns='http://www.w3.org/2000/svg'
+      >
+        <path
+          className='highlight--stroke'
+          d='M1 1L16 32.5L1 64'
+          stroke='#D1D1D1'
+        />
+      </svg>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  height: 100%;
+  width: auto;
+`;
+
+export default React.memo(TabsSectionDelimiter);

packages/react-components/src/Tabs/index.tsx

@@ -0,0 +1,120 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import type { Location } from 'history';
+import type { TabItem } from '../types.js';
+
+import React, { useEffect, useMemo } from 'react';
+import { useLocation } from 'react-router-dom';
+
+import { TabsCtx } from '@pezkuwi/react-hooks/ctx/Tabs';
+
+import { styled } from '../styled.js';
+import CurrentSection from './CurrentSection.js';
+import Tab from './Tab.js';
+import Delimiter from './TabsSectionDelimiter.js';
+
+interface Props {
+  className?: string;
+  basePath: string;
+  hidden?: string[] | null | false;
+  items: (TabItem | false | null | undefined)[];
+}
+
+// redirect on invalid tabs
+function redirect (basePath: string, location: Location, items: (TabItem | false | null | undefined)[], hidden?: string[] | null | false): void {
+  if (location.pathname !== basePath) {
+    // Has the form /staking/query/<something>
+    const [,, section] = location.pathname.split('/');
+    const alias = items.find((v) => v && v.alias === section);
+
+    if (alias) {
+      window.location.hash = alias.isRoot
+        ? basePath
+        : `${basePath}/${alias.name}`;
+    } else if (hidden && (hidden.includes(section) || !items.some((v) => v && !v.isRoot && v.name === section))) {
+      window.location.hash = basePath;
+    }
+  }
+}
+
+function Tabs ({ basePath, className = '', hidden, items }: Props): React.ReactElement<Props> {
+  const location = useLocation();
+  const { icon, text } = React.useContext(TabsCtx);
+
+  const filtered = useMemo(
+    () => items.filter((v): v is TabItem => !!v && (!hidden || !hidden.includes(v.name))),
+    [hidden, items]
+  );
+
+  useEffect(
+    () => redirect(basePath, location, items, hidden),
+    [basePath, hidden, items, location]
+  );
+
+  return (
+    <StyledHeader className={`${className} ui--Tabs`}>
+      <div className='tabs-container'>
+        {text && icon && (
+          <CurrentSection
+            icon={icon}
+            text={text}
+          />
+        )}
+        <Delimiter />
+        <ul className='ui--TabsList'>
+          {filtered.map((tab, index) => (
+            <li
+              className={tab.isHidden ? '--hidden' : ''}
+              key={index}
+            >
+              <Tab
+                {...tab}
+                basePath={basePath}
+                index={index}
+                key={tab.name}
+              />
+            </li>
+          ))}
+        </ul>
+      </div>
+    </StyledHeader>
+  );
+}
+
+const StyledHeader = styled.header`
+  background: var(--bg-tabs);
+  border-bottom: 1px solid var(--border-tabs);
+  text-align: left;
+  z-index: 1;
+
+  & .tabs-container {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    margin: 0 auto;
+    max-width: var(--width-full);
+    padding: 0 1.5rem 0 0;
+    height: 3.286rem;
+  }
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0px;
+  }
+
+  .ui--TabsList {
+    display: flex;
+    height: 100%;
+    list-style: none;
+    margin: 0 1.4rem;
+    padding: 0;
+    white-space: nowrap;
+
+    @media only screen and (max-width: 900px) {
+      margin: 0 2.72rem 0 2.35rem;
+    }
+  }
+`;
+
+export default React.memo(Tabs);