networkException/nwex.de
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Finalised first SocialBadge revision

Browse source
This commit is contained in:
Niklas Schrötler 2021-04-04 18:02:52 +02:00
parent ece8b40efa
commit 6fa69bceca
2 changed files with 26 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
src/components/SocialBadge/SocialBadge.stories.tsx
View file

@ -6,7 +6,9 @@ export default {
title: "Component/SocialBadge", title: "Component/SocialBadge",
component: SocialBadge, component: SocialBadge,
argTypes: { 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 } as Meta
@ -16,8 +18,10 @@ const Template: Story<SocialBadgeProps> = (args) => <SocialBadge {...args} />
export const Default = Template.bind({}) export const Default = Template.bind({})
Default.args = {} Default.args = {}
// Title = "Hello World" // GitHub Variant
export const TitleHelloWorld = Template.bind({}) export const Github = Template.bind({})
TitleHelloWorld.args = { Github.args = {
title: "Hello World" title: "github.com",
link: "https://github.com/networkException",
imagePath: "/assets/icons/github.svg"
} }

21
src/components/SocialBadge/index.tsx
View file

@ -1,15 +1,22 @@
import React from "react" import React from "react";
import Logo from "../../assets/square-logo.svg"
export interface SocialBadgeProps { export interface SocialBadgeProps {
title?: string title: string
link: string,
imagePath: string
} }
export const SocialBadge: React.FC<SocialBadgeProps> = () => { export const SocialBadge: React.FC<SocialBadgeProps> = ({title, link, imagePath}) => {
link = link ?? "/404";
title = title ?? "Unbekannt";
console.log(imagePath);
return ( 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"}> <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"
<img className="flex rounded-full" src={"/assets/icons/github.svg"} /> href={link}>
<div className="mx-4 font-semibold text-xl">GitHub</div> {imagePath?(<img className={`flex rounded-full h-12 w-12`} src={imagePath}/>):null}
<div className="mx-4 font-semibold text-xl">{title}</div>
</a> </a>
) )
} }