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
2026-04-22 22:57:57 +00:00 · 2026-01-07 13:05:27 +03:00
commit d21bfb1320
5867 changed files with 329019 additions and 0 deletions
@@ -0,0 +1,91 @@
+// Copyright 2017-2025 @pezkuwi/react-components authors & contributors
+// SPDX-License-Identifier: Apache-2.0
+
+import React from 'react';
+import ReactMd from 'react-markdown';
+import rehypeRaw from 'rehype-raw';
+
+import { useToggle } from '@pezkuwi/react-hooks';
+
+import Icon from './Icon.js';
+import { styled } from './styled.js';
+
+interface Props {
+  className?: string;
+  md: string;
+}
+
+const rehypePlugins = [rehypeRaw];
+
+function HelpOverlay ({ className = '', md }: Props): React.ReactElement<Props> {
+  const [isVisible, toggleVisible] = useToggle();
+
+  return (
+    <StyledDiv className={`${className} ui--HelpOverlay`}>
+      <div className='help-button'>
+        <Icon
+          icon='question-circle'
+          onClick={toggleVisible}
+        />
+      </div>
+      <div className={`help-slideout ${isVisible ? 'open' : 'closed'}`}>
+        <div className='help-button'>
+          <Icon
+            icon='times'
+            onClick={toggleVisible}
+          />
+        </div>
+        <ReactMd
+          className='help-content'
+          rehypePlugins={rehypePlugins}
+        >
+          {md}
+        </ReactMd>
+      </div>
+    </StyledDiv>
+  );
+}
+
+const StyledDiv = styled.div`
+  .help-button {
+    color: var(--color-text);
+    cursor: pointer;
+    font-size: 2rem;
+    padding: 0.35rem 1.5rem 0 0;
+  }
+
+  > .help-button {
+    position: absolute;
+    right: 0rem;
+    top: 0rem;
+    z-index: 10;
+  }
+
+  .help-slideout {
+    background: var(--bg-page);
+    box-shadow: -6px 0px 20px 0px rgba(0, 0, 0, 0.3);
+    bottom: 0;
+    max-width: 50rem;
+    overflow-y: scroll;
+    position: fixed;
+    right: -50rem;
+    top: 0;
+    transition-duration: .5s;
+    transition-property: all;
+    z-index: 225; /* 5 more than menubar */
+
+    .help-button {
+      text-align: right;
+    }
+
+    .help-content {
+      padding: 1rem 1.5rem 5rem;
+    }
+
+    &.open {
+      right: 0;
+    }
+  }
+`;
+
+export default React.memo(HelpOverlay);