# All files / components/windows ProjectsContent.tsx

10.29% Statements 7/68
0% Branches 0/1
0% Functions 0/2
10.29% Lines 7/68

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
    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
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99

    1x
    1x
    1x

    1x
    1x
    1x

    1x

     "use client";

    import { projects } from "@/data/apps";
    import styles from "@/components/windows/WindowContent.module.css";
    import { ExternalLink } from "lucide-react";

    // 🧠 Debug toggle
    const DEBUG =
      (typeof process !== "undefined" &&
        process.env.NODE_ENV !== "production") ||
      (typeof process !== "undefined" &&
        process.env.NEXT_PUBLIC_DEBUG === "true");

    const dlog = (...args: any[]) => {
      if (DEBUG) console.log("[ProjectsContent]", ...args);
    };

    export default function ProjectsContent() {
      if (!Array.isArray(projects) || projects.length === 0) {
        dlog("⚠️ No projects found – showing fallback.");
        return (
          <div className={styles.windowContent}>
            <section className={styles.contentSection}>
              <h2>My Projects</h2>
              <p>No projects data available at the moment.</p>
            </section>
          </div>
        );
      }

      dlog(`🧱 Rendering ${projects.length} projects`);

      return (
        <div className={styles.windowContent}>
          <section className={styles.contentSection}>
            <h2>My Projects</h2>
            <div className={styles.projectsGrid}>
              {projects.map((project) => {
                const {
                  id,
                  image,
                  name,
                  role,
                  description,
                  impact,
                  techStack = [],
                  link,
                } = project || {};

                return (
                  <div key={id || Math.random()} className={styles.projectCard}>
                    <img
                      src={image || "/placeholder.svg"}
                      alt={name || "Project"}
                      className={styles.projectImage}
                      loading="lazy"
                    />
                    <div className={styles.projectContent}>
                      <h3>{name || "Untitled Project"}</h3>
                      {role && (
                        <p>
                          <strong>Role:</strong> {role}
                        </p>
                      )}
                      {description && <p>{description}</p>}
                      {impact && (
                        <p>
                          <strong>Impact:</strong> {impact}
                        </p>
                      )}
                      {Array.isArray(techStack) && techStack.length > 0 && (
                        <div className={styles.techStack}>
                          {techStack.map((tech, index) => (
                            <span key={index} className={styles.techTag}>
                              {tech}
                            </span>
                          ))}
                        </div>
                      )}
                      {link && (
                        <a
                          href={link}
                          target="_blank"
                          rel="noopener noreferrer"
                          className={styles.projectLink}
                        >
                          View Project <ExternalLink size={16} />
                        </a>
                      )}
                    </div>
                  </div>
                );
              })}
            </div>
          </section>
        </div>
      );
    }