added url in orginfo

Author: swathi2006

src/components/SupportUsButton.tsx

@@ -49,9 +49,7 @@ function getButtonClasses(buttonVariant: ButtonVariant): string {
 }
 
 // Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant
-function SupportUsButton(
-  
-  {
+function SupportUsButton({
   Theme = "AOSSIE",
   pattern = "AOSSIE",
   hero = {
@@ -72,29 +70,11 @@ function SupportUsButton(
   },
   buttonVariant = "AOSSIE",
 }: supportUsButtonProps): React.JSX.Element {
- // Ensure required props are provided to prevent runtime crashes
- 
-  if (!organizationInformation) {
-    console.warn(
-      "SupportUsButton: 'organizationInformation' is required."
-    );
-  }
-
-  if (!ctaSection) {
-    console.warn(
-      "SupportUsButton: 'ctaSection' is required."
-    );
-  }
-
-  // Defensive fallback to handle unexpected missing props at runtime
-  const org = organizationInformation ?? null;
-  const cta = ctaSection ?? null;
   return (
     // Container for the support us button, with dynamic classes based on the selected theme and custom class names
     <div
       className={`w-full font-sans justify-center items-center text-center ${Theme == "light" || Theme == "dark" ? classAccordingToTheme(Theme) : "bg-black text-white"} ${classNames.container}`}
     >
-      
       {/* Hero section with optional background image*/}
       <div className="relative w-full h-[50vh] flex justify-center">
         {hero.Image && (
@@ -148,9 +128,7 @@ function SupportUsButton(
       </div>
 
       {/* Organization information section */}
-     {/* Avoid rendering empty organization section when data is not provided */}
-{org && (
-  <div className="w-full flex justify-center p-10 mb-50">
+      <div className="w-full flex justify-center p-10 mb-50">
         <div
           className={`${classNames.organizationInformation}
           relative w-[90%] p-15 rounded-2xl overflow-visible
@@ -184,21 +162,21 @@ function SupportUsButton(
 
             {/* Organization logo */}
             <div>
-              {typeof org.logo === "string" ? (
+              {typeof organizationInformation.logo === "string" ? (
                 <span
                   className="block h-fit w-fit p-4 bg-black text-white rounded-2xl"
-                  title={org.logo}
+                  title={organizationInformation.logo}
                 >
                   <b className="text-2xl italic">
-                    {org.logo}
+                    {organizationInformation.logo}
                   </b>
                 </span>
               ) : (
                 <img
                   className="w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center"
-                  src={org.logo?.src}
-                  alt={org.logo?.alt}
-                  title={org.logo?.alt}
+                  src={organizationInformation.logo?.src}
+                  alt={organizationInformation.logo?.alt}
+                  title={organizationInformation.logo?.alt}
                   draggable={false}
                 />
               )}
@@ -207,15 +185,34 @@ function SupportUsButton(
             {/* Organization name and description */}
             <div className="flex flex-col gap-4">
               <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>
-                {org.name}
+                {organizationInformation.name}
               </h2>
               <p className="font-[650] text-lg">
-                {org.description}
+                {organizationInformation.description}
               </p>
             </div>
 
+            {/* Visit Organization Button */}
+            {organizationInformation.url && (
+              <a
+                href={organizationInformation.url}
+                target="_blank"
+                rel="noopener noreferrer"
+                title={`Visit ${organizationInformation.name}'s website`}
+                className={`w-fit px-6 py-2 rounded-lg font-bold transition-all active:scale-[0.98] shadow-md
+                  ${Theme === "AOSSIE" && "bg-black text-white hover:bg-gray-800"}
+                  ${Theme === "light" && "bg-gray-800 text-white hover:bg-black"}
+                  ${Theme === "dark" && "bg-white text-black hover:bg-gray-200"}
+                  ${Theme === "minimal" && "bg-gray-800 text-white hover:bg-black"}
+                  ${Theme === "corporate" && "bg-blue-800 text-white hover:bg-blue-900"}
+                `}
+              >
+                Visit Organisation
+              </a>
+            )}
+
             {/* Line */}
-            {org.projectInformation && (
+            {organizationInformation.projectInformation && (
               <div
                 className={`
             border
@@ -228,7 +225,7 @@ function SupportUsButton(
             )}
 
             {/* Project information */}
-            {org.projectInformation && (
+            {organizationInformation.projectInformation && (
               <div className="flex flex-col gap-2">
                 <h3
                   className={`font-bold w-fit uppercase text-sm p-2 rounded-lg
@@ -239,7 +236,7 @@ function SupportUsButton(
                   ${Theme === "corporate" && "bg-blue-600/50"}`}
                 >
                   ABOUT PROJECT:{" "}
-                  {org.projectInformation.name}
+                  {organizationInformation.projectInformation.name}
                 </h3>
                 <p
                   className={`italic font-semibold 
@@ -250,16 +247,14 @@ function SupportUsButton(
                 ${Theme === "corporate" && "text-blue-600/80"}
                 `}
                 >
-                  "{org.projectInformation.description}"
+                  "{organizationInformation.projectInformation.description}"
                 </p>
               </div>
             )}
           </div>
         </div>
       </div>
 
-)}
-
       {/* Sponsors section */}
       <div
         className={`w-full flex justify-center mt-10 p-10
@@ -441,23 +436,21 @@ function SupportUsButton(
       </div>
 
       {/* Call-to-action section with title, description, and sponsor links */}
-      {cta && (
-      
       <div
         className={`w-full flex justify-center p-10 ${(Theme === "light" || Theme === "dark") && classAccordingToTheme(Theme)} ${classNames.ctaSection}`}
       >
         <div className="w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20">
           <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>
-            {cta.title}
+            {ctaSection.title}
           </h2>
           <p
             className={`font-semibold 
               ${Theme === "light" ? "text-gray-600" : "text-gray-400"}`}
           >
-            {cta.description}
+            {ctaSection.description}
           </p>
           <div className="flex flex-wrap justify-center items-center gap-5 mt-8">
-            {cta.sponsorLink.map((link, index) => (
+            {ctaSection.sponsorLink.map((link, index) => (
               <a
                 href={link.url}
                 key={index}
@@ -475,7 +468,7 @@ function SupportUsButton(
             ))}
           </div>
         </div>
-      </div>)}
+      </div>
     </div>
   );
 }

src/types/index.ts

@@ -56,6 +56,9 @@ export type organizationInformation = {
   /** Organization logo */
   logo?: Image | string;
 
+  /** Organization website or GitHub URL */
+  url?: string;
+
   projectInformation?: projectInformation;
 };