Accept props in GraphQLConfCard and use 2025 YT link (#2089)

Author: hasparus

.changeset/rich-dodos-cover.md

@@ -0,0 +1,5 @@
+---
+'@theguild/components': minor
+---
+
+Accept props in GraphQLConfCard and use 2025 YT link'

packages/components/src/components/hive-navigation/graphql-conf-card.tsx

@@ -5,25 +5,34 @@ import { NavigationMenuLink } from './navigation-menu';
 
 export interface GraphQLConfCardProps {
   image: StaticImageData;
+  href?: string;
+  title?: string;
+  details?: string;
+  description?: string;
+  callToAction?: string;
 }
-export function GraphQLConfCard({ image }: GraphQLConfCardProps) {
+export function GraphQLConfCard({
+  image,
+  href = 'https://youtube.com/playlist?list=PL43V96KpNj7MKvDbnyOUrRv0k1gCODtjW&si=nOiETn8J21mYA9pm',
+  title = 'GraphQLConf 2025',
+  details = 'September 08-10 | Amsterdam, NL',
+  description = 'The official GraphQL conference hosted by GraphQL Foundation.',
+  callToAction = 'Watch The Guild at GraphQLConf 2025',
+}: GraphQLConfCardProps) {
   return (
-    <NavigationMenuLink
-      href="https://www.youtube.com/playlist?list=PL43V96KpNj7OMvmfL0WFKP6LpoboM8Hde"
-      className="group w-[358px]"
-    >
+    <NavigationMenuLink href={href} className="group w-[358px]">
       <Image alt="" src={image} width={358} height={200} />
       <strong className="mt-6 block text-xl font-medium leading-7 text-green-1000 dark:text-neutral-100">
-        GraphQLConf 2025
+        {title}
       </strong>
       <p className="mt-4 text-sm font-medium leading-5 text-green-800 dark:text-neutral-200">
-        September 08-10 | Amsterdam, NL
+        {details}
       </p>
       <p className="mt-2 text-sm font-normal leading-5 text-green-800 dark:text-neutral-200">
-        The official GraphQL conference hosted by GraphQL Foundation.
+        {description}
       </p>
       <span className="mt-6 flex items-center gap-2 rounded-lg font-medium text-green-800 transition-colors group-hover:text-green-1000 dark:text-neutral-200 dark:group-hover:text-neutral-100">
-        Watch The Guild at GraphQLConf 2025
+        {callToAction}
         <ArrowIcon />
       </span>
     </NavigationMenuLink>

packages/components/src/components/hive-navigation/index.stories.tsx

@@ -177,13 +177,7 @@ export const Company: StoryObj = {
     return (
       <NavigationMenu>
         <CompanyMenu>
-          <GraphQLConfCard
-            image={{
-              height: 750,
-              width: 1200,
-              src: graphQLConfLocalImage,
-            }}
-          />
+          <GraphQLConfCard image={graphQLConfLocalImage} />
         </CompanyMenu>
       </NavigationMenu>
     );