codeharborhub.github.io/src/theme/DocItem/DocsInfo.js at 8fe35e3acb6ee87abd83b7cb24f36c88824a7cae · codeharborhub/codeharborhub.github.io · GitHub

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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
import React from "react";
import { useLocation } from "react-router-dom";
import {
  FiEdit3,
  FiPrinter,
  FiAlertCircle,
  FiClock,
  FiUser,
} from "react-icons/fi";
import styles from "./styles.module.css";
import ShareButton from "./ShareButton";

function DocsInfo({ docsPluginId, ...props }) {
  const location = useLocation();
  const openDocIssueURL =
    "https://github.com/codeharborhub/codeharborhub.github.io/issues/new?assignees=&labels=&template=---doc-error-report.md&title=Issue with codeharborhub.github.io" +
    `${location.pathname}`;

  return (
    <div className={`${styles.docsInfoWrapper} mt-4`}>
      <div className={`${styles.docsInfoContainer}`}>
        {/* Left Section – Meta Info */}
        {(props.lastUpdatedAt || props.lastUpdatedBy) && (
          <div className={styles.metaInfo}>
            {props.lastUpdatedAt && (
              <span className={styles.metaItem}>
                <FiClock className={styles.icon} />
                <time dateTime={new Date(props.lastUpdatedAt).toISOString()}>
                  {new Date(props.lastUpdatedAt).toLocaleDateString()}
                </time>
              </span>
            )}
            {props.readingTimeInWords && (
              <span className={styles.metaItem}>
                ⏱ {props.readingTimeInWords}
              </span>
            )}
            {props.lastUpdatedBy && (
              <span className={styles.metaItem}>
                <FiUser className={styles.icon} />
                {props.lastUpdatedBy}
              </span>
            )}
          </div>
        )}

        {/* Right Section – Actions */}
        <div className={styles.actions}>
          {props.editUrl && (
            <a
              href={props.editUrl}
              target="_blank"
              rel="noreferrer noopener"
              className={styles.actionBtn}
            >
              <FiEdit3 className={styles.icon} />
              Edit
            </a>
          )}

          <button
            onClick={() => window.print()}
            className={styles.actionBtn}
            aria-label="Print this page"
          >
            <FiPrinter className={styles.icon} />
            Print
          </button>

          {openDocIssueURL && (
            <a
              href={openDocIssueURL}
              target="_blank"
              rel="noreferrer noopener"
              className={styles.actionBtn}
            >
              <FiAlertCircle className={styles.icon} />
              Report
            </a>
          )}

          <ShareButton title={props.title} />
        </div>
      </div>
    </div>
  );
}

export default DocsInfo;