InterfaceDetailsNav InterfaceDetailsNav.tsx

50% Statements 2/4

66.66% Branches 4/6

33.33% Functions 1/3

50% Lines 2/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42  
 
 
 
 
 
 
3x
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
  import { useState } from "react";
 
type Props = {
  hasDeveloperDocumentation: boolean;
};
 
function InterfaceDetailsNav({ hasDeveloperDocumentation }: Props) {
  const [activeLink, setActiveLink] = useState("charms");
  return (
    <div className="p-side-navigation">
      <ul className="p-side-navigation__list">
        <li className="p-side-navigation__item">
          <a
            href="#charms"
            className={`p-side-navigation__link ${
              activeLink === "charms" ? "is-active" : ""
            }`}
            onClick={() => setActiveLink("charms")}
          >
            Charms
          </a>
        </li>
        {hasDeveloperDocumentation && (
          <li className="p-side-navigation__item">
            <a
              href="#developer-documentation"
              className={`p-side-navigation__link ${
                activeLink === "developer-documentation" ? "is-active" : ""
              }`}
              onClick={() => setActiveLink("developer-documentation")}
            >
              Developer documentation
            </a>
          </li>
        )}
      </ul>
    </div>
  );
}
 
export default InterfaceDetailsNav;