diff --git a/package.json b/package.json index 27424339..2a20f425 100644 --- a/package.json +++ b/package.json @@ -59,4 +59,4 @@ "prettier-plugin-tailwindcss" ] } -} \ No newline at end of file +} diff --git a/src/assets/discord.svg b/src/assets/discord.svg new file mode 100644 index 00000000..f9fd918b --- /dev/null +++ b/src/assets/discord.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/github.svg b/src/assets/github.svg new file mode 100644 index 00000000..aa05db9c --- /dev/null +++ b/src/assets/github.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/assets/linkedin.svg b/src/assets/linkedin.svg new file mode 100644 index 00000000..c6634290 --- /dev/null +++ b/src/assets/linkedin.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/Graph/Graph.tsx b/src/components/Graph/Graph.tsx index d05c1224..0e8e9fcc 100644 --- a/src/components/Graph/Graph.tsx +++ b/src/components/Graph/Graph.tsx @@ -564,6 +564,7 @@ const Graph: FC = () => { enter="transition-all duration-500 delay-500" enterFrom="opacity-0 scale-150" enterTo="opacity-100 scale-100" + className="h-full w-full" > {searchedAddresses.length > 0 && ( { ]; return ( - + {Buttons.map((button) => { return ( void; diff --git a/src/components/Socials/Socials.css b/src/components/Socials/Socials.css new file mode 100644 index 00000000..66af9cc8 --- /dev/null +++ b/src/components/Socials/Socials.css @@ -0,0 +1,4 @@ +.custom-svg-color { + filter: brightness(0) saturate(100%) invert(20%) sepia(100%) saturate(7500%) + hue-rotate(345deg) brightness(100%) contrast(100%); +} diff --git a/src/components/Socials/Socials.tsx b/src/components/Socials/Socials.tsx new file mode 100644 index 00000000..f2d50f0b --- /dev/null +++ b/src/components/Socials/Socials.tsx @@ -0,0 +1,58 @@ +import { FC } from "react"; +import clsx from "clsx"; + +import discord from "../../assets/discord.svg"; +import github from "../../assets/github.svg"; +import linkedin from "../../assets/linkedin.svg"; + +interface Social { + name: string; + Icon: string; + link: string; +} + +const SocialList: Social[] = [ + { + name: "Github", + Icon: github, + link: "https://github.com/WardAnalytics/WardGraph", + }, + { + name: "Discord", + Icon: discord, + link: "https://discord.gg/4ZzgeUwa", + }, + { + name: "LinkedIn", + Icon: linkedin, + link: "https://www.linkedin.com/company/wardanalytics/", + }, +]; + +const SocialButton: FC = ({ name, Icon, link }) => { + return ( + + + + ); +}; + +interface SocialsProps { + className?: string; +} + +const Socials: FC = ({ className }) => { + return ( + + {SocialList.map((social) => { + return ; + })} + + ); +}; + +export default Socials; diff --git a/src/components/Socials/index.tsx b/src/components/Socials/index.tsx new file mode 100644 index 00000000..1c22d09a --- /dev/null +++ b/src/components/Socials/index.tsx @@ -0,0 +1,3 @@ +import Socials from "./Socials"; + +export default Socials; diff --git a/src/templates/GraphTemplate.tsx b/src/templates/GraphTemplate.tsx index 6f363048..488b5cd9 100644 --- a/src/templates/GraphTemplate.tsx +++ b/src/templates/GraphTemplate.tsx @@ -1,10 +1,12 @@ import { FC } from "react"; import Graph from "../components/Graph"; +import Socials from "../components/Socials"; const GraphTemplate: FC = () => { return ( + ); };