Added SocialBadge, moved assets
Niklas Schrötler
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.8 KiB After Width: | Height: | Size: 2.8 KiB |
|
Before Width: | Height: | Size: 1.3 KiB After Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 3.3 KiB After Width: | Height: | Size: 3.3 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 5.2 KiB After Width: | Height: | Size: 5.2 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.8 KiB After Width: | Height: | Size: 1.8 KiB |
|
|
@ -1,14 +0,0 @@
|
||||||
import React from "react"
|
|
||||||
import Logo from "../../assets/square-logo.svg"
|
|
||||||
|
|
||||||
export interface HeroProps {
|
|
||||||
title?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export const Hero: React.FC<HeroProps> = () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<h1 className="bg-red-100 dark:bg-red-900">Hallo Jakob</h1>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
@ -1,16 +1,16 @@
|
||||||
import React from "react"
|
import React from "react"
|
||||||
import { Story, Meta } from "@storybook/react/types-6-0"
|
import { Story, Meta } from "@storybook/react/types-6-0"
|
||||||
import { Hero, HeroProps } from "."
|
import { SocialBadge, SocialBadgeProps } from "."
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
title: "Component/Hero",
|
title: "Component/SocialBadge",
|
||||||
component: Hero,
|
component: SocialBadge,
|
||||||
argTypes: {
|
argTypes: {
|
||||||
title: { control: "string" }
|
title: { control: "string" }
|
||||||
}
|
}
|
||||||
} as Meta
|
} as Meta
|
||||||
|
|
||||||
const Template: Story<HeroProps> = (args) => <Hero {...args} />
|
const Template: Story<SocialBadgeProps> = (args) => <SocialBadge {...args} />
|
||||||
|
|
||||||
// Default scenario
|
// Default scenario
|
||||||
export const Default = Template.bind({})
|
export const Default = Template.bind({})
|
||||||
15
src/components/SocialBadge/index.tsx
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
import React from "react"
|
||||||
|
import Logo from "../../assets/square-logo.svg"
|
||||||
|
|
||||||
|
export interface SocialBadgeProps {
|
||||||
|
title?: 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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
@ -1,6 +1,4 @@
|
||||||
import Head from "next/head"
|
import Head from "next/head"
|
||||||
import "../components/Hero"
|
|
||||||
import { Hero } from "../components/Hero"
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Home() {
|
||||||
return (
|
return (
|
||||||
|
|
@ -8,7 +6,7 @@ export default function Home() {
|
||||||
<Head>
|
<Head>
|
||||||
<title>nwex.de</title>
|
<title>nwex.de</title>
|
||||||
</Head>
|
</Head>
|
||||||
<Hero />
|
|
||||||
</>
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
||||||