Finalised first SocialBadge revision

src/components/SocialBadge/SocialBadge.stories.tsx

@@ -6,7 +6,9 @@ export default {
   title: "Component/SocialBadge",
   component: SocialBadge,
   argTypes: {
-    title: { control: "string" }
+    title: { description: "The text displayed to the right of the icon" },
+    link: { description: "The link that is opened when the Badge is clicked" },
+    imagePath: { description: "The path to the circular image on the left" },
   }
 } as Meta
 
@@ -16,8 +18,10 @@ const Template: Story<SocialBadgeProps> = (args) => <SocialBadge {...args} />
 export const Default = Template.bind({})
 Default.args = {}
 
-// Title = "Hello World"
-export const TitleHelloWorld = Template.bind({})
-TitleHelloWorld.args = {
-  title: "Hello World"
+// GitHub Variant
+export const Github = Template.bind({})
+Github.args = {
+  title: "github.com",
+  link: "https://github.com/networkException",
+  imagePath: "/assets/icons/github.svg"
 }

src/components/SocialBadge/index.tsx

@@ -1,15 +1,22 @@
-import React from "react"
-import Logo from "../../assets/square-logo.svg"
+import React from "react";
 
 export interface SocialBadgeProps {
-  title?: string
+    title: string
+    link: string,
+    imagePath: string
 }
 
-export const SocialBadge: React.FC<SocialBadgeProps> = () => {
-  return (
-    <a className="block bg-white rounded-full shadow-lg p-2.5 flex w-max items-center cursor-pointer transition-transform transform hover:scale-105 focus:outline-none focus:ring" href={"https://google.com"}>
-        <img className="flex rounded-full" src={"/assets/icons/github.svg"} />
-        <div className="mx-4 font-semibold text-xl">GitHub</div>
-    </a>
-  )
+export const SocialBadge: React.FC<SocialBadgeProps> = ({title, link, imagePath}) => {
+    link = link ?? "/404";
+    title = title ?? "Unbekannt";
+
+    console.log(imagePath);
+
+    return (
+        <a className="block bg-white rounded-full shadow-lg p-2 flex w-max items-center cursor-pointer transition-transform transform hover:scale-105 focus:outline-none focus:ring h-16"
+           href={link}>
+            {imagePath?(<img className={`flex rounded-full h-12 w-12`} src={imagePath}/>):null}
+            <div className="mx-4 font-semibold text-xl">{title}</div>
+        </a>
+    )
 }