ntuthuko-launchpad 1.0.0

package/LaunchPad.tsx

@@ -0,0 +1,148 @@
+"use client"; // Mark this as a Client Component
+
+import React, { ReactNode } from "react";
+import Image from "next/image";
+import dynamic from "next/dynamic";
+import { FaLinkedin, FaEnvelope, FaPhone, FaSun, FaMoon } from "react-icons/fa";
+
+// Dynamically import NextUI components with no SSR
+const Card = dynamic(() => import("@nextui-org/react").then((mod) => mod.Card), { ssr: false });
+const Button = dynamic(() => import("@nextui-org/react").then((mod) => mod.Button), { ssr: false });
+
+// Define the props interface for the component
+export interface LaunchPadProps {
+  profileImageSrc: string;
+  name: string;
+  title: string;
+  location: string;
+  introTitle: string;
+  introDescription: string | string[];
+  email: string;
+  linkedinUrl: string;
+  emailIcon?: ReactNode;
+  linkedinIcon?: ReactNode;
+  contactNumber?: string;
+  phoneIcon?: ReactNode;
+  splitIntro?: boolean;
+  maxIntroWords?: number;
+  introTextColor?: string;
+  containerTextColor?: string;
+  defaultTheme?: "light" | "dark";
+  allowThemeToggle?: boolean;
+  backgroundLight?: string;
+  textColorLight?: string;
+  introBgColorLight?: string;
+  buttonHoverBgColorLight?: string;
+  backgroundDark?: string;
+  textColorDark?: string;
+  introBgColorDark?: string;
+  buttonHoverBgColorDark?: string;
+  background?: string | { light: string; dark: string };
+  textColor?: string | { light: string; dark: string };
+  introBgColor?: string | { light: string; dark: string };
+  mainBgColor?: string | { light: string; dark: string };
+}
+
+const LaunchPad: React.FC<LaunchPadProps> = ({
+  profileImageSrc,
+  name,
+  title,
+  location,
+  introTitle,
+  introDescription,
+  email,
+  linkedinUrl,
+  emailIcon = <FaEnvelope />,
+  linkedinIcon = <FaLinkedin />,
+  contactNumber,
+  phoneIcon = <FaPhone />,
+  splitIntro = false,
+  maxIntroWords = 80,
+  introTextColor = "",
+  containerTextColor = "",
+  defaultTheme = "light",
+  allowThemeToggle = true,
+  backgroundLight = "bg-white",
+  textColorLight = "text-black",
+  introBgColorLight = "bg-gray-100",
+  buttonHoverBgColorLight = "hover:bg-gray-100",
+  backgroundDark = "bg-black",
+  textColorDark = "text-white",
+  introBgColorDark = "bg-gray-800",
+  buttonHoverBgColorDark = "hover:bg-gray-700",
+  background,
+  textColor,
+  introBgColor,
+  mainBgColor,
+}) => {
+  const [theme, setTheme] = React.useState(defaultTheme);
+
+  const toggleTheme = () => {
+    setTheme((prevTheme) => (prevTheme === "light" ? "dark" : "light"));
+  };
+
+  const backgroundClass = background
+    ? typeof background === "string"
+      ? background
+      : theme === "light"
+      ? background.light
+      : background.dark
+    : theme === "light"
+    ? backgroundLight
+    : backgroundDark;
+
+  const textColorClass = textColor
+    ? typeof textColor === "string"
+      ? textColor
+      : theme === "light"
+      ? textColor.light
+      : textColor.dark
+    : theme === "light"
+    ? textColorLight
+    : textColorDark;
+
+  const introBgColorClass = introBgColor
+    ? typeof introBgColor === "string"
+      ? introBgColor
+      : theme === "light"
+      ? introBgColor.light
+      : introBgColor.dark
+    : theme === "light"
+    ? introBgColorLight
+    : introBgColorDark;
+
+  const buttonHoverBgColor =
+    theme === "light" ? buttonHoverBgColorLight : buttonHoverBgColorDark;
+
+  const mainBgColorClass = mainBgColor
+    ? typeof mainBgColor === "string"
+      ? mainBgColor
+      : theme === "light"
+      ? mainBgColor.light
+      : mainBgColor.dark
+    : "";
+
+  return (
+    <div className={`flex flex-col items-center min-h-screen ${containerTextColor} ${backgroundClass} bg-cover bg-center`}>
+      <main className={`flex flex-col gap-8 items-center flex-grow w-full max-w-lg mt-2 px-4 ${mainBgColorClass}`}>
+        <Card className="w-full shadow-sm flex flex-col items-center mt-4 p-6">
+          {allowThemeToggle && (
+            <button onClick={toggleTheme} className="self-end p-2 m-4 rounded-md bg-gray-200">
+              {theme === "light" ? <FaMoon /> : <FaSun />}
+            </button>
+          )}
+          <div className="flex-shrink-0">
+            <Image src={profileImageSrc} alt={`${name} Profile Image`} width={100} height={100} className="rounded-full" priority />
+          </div>
+          <div className={`flex flex-col items-center text-center mt-4 ${textColorClass}`}>
+            <h3 className="text-xl font-bold">{name}</h3>
+            <p className="text-base">{title}</p>
+            <p className="text-sm">{location}</p>
+          </div>
+        </Card>
+      </main>
+    </div>
+  );
+};
+
+export default LaunchPad;

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "ntuthuko-launchpad",
+  "version": "1.0.0",
+  "description": "A versatile page component for professionals, freelancers, or businesses, ideal as a placeholder during development or for announcements, invitations, and business info. Features theme toggling, dynamic content, and customizable styling for a polished look.",
+  "main": "page.tsx",
+  "scripts": {
+    "test": "jest"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/ntuthuko-dlamini/ntuthuko-dlamini-portfolio.git"
+  },
+  "keywords": [
+    "launchpad",
+    "customizable",
+    "coming-soon",
+    "page-component"
+  ],
+  "author": "Ntuthuko Dlamini",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://gitlab.com/ntuthuko-dlamini/ntuthuko-dlamini-portfolio/issues"
+  },
+  "homepage": "https://gitlab.com/ntuthuko-dlamini/ntuthuko-dlamini-portfolio#readme"
+}