Add a "view codebase" button.
This commit is contained in:
24
src/components/buttons/GitHub.tsx
Normal file
24
src/components/buttons/GitHub.tsx
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
import React from "react";
|
||||||
|
import { Box, Link, Button, BoxProps, Text } from "@chakra-ui/react";
|
||||||
|
import { Icon } from "@iconify/react";
|
||||||
|
import { motion } from "framer-motion";
|
||||||
|
|
||||||
|
const MotionBox = motion<BoxProps>(Box);
|
||||||
|
|
||||||
|
const GitHub = (): JSX.Element => {
|
||||||
|
return (
|
||||||
|
<MotionBox whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
|
||||||
|
<Link
|
||||||
|
href="work/lcm/LucidCreationsWebsite/src/components/buttons/KoFi.tsx"
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener"
|
||||||
|
>
|
||||||
|
<Button variant="primary" leftIcon={<Icon icon="mdi:github" />}>
|
||||||
|
<Text>{"View Codebase"}</Text>
|
||||||
|
</Button>
|
||||||
|
</Link>
|
||||||
|
</MotionBox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default GitHub;
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
export interface LinkObj {
|
export interface LinkObj {
|
||||||
href?: string;
|
href?: string;
|
||||||
name?: string;
|
name?: string;
|
||||||
type: "primary" | "secondary" | "updates" | "ko-fi";
|
type: "primary" | "secondary" | "ko-fi" | "GitHub";
|
||||||
}
|
}
|
||||||
|
|
||||||
type Links = LinkObj[];
|
type Links = LinkObj[];
|
||||||
@@ -19,6 +19,9 @@ const links: Links = [
|
|||||||
href: "https://t.me/LucidCreationsMedia",
|
href: "https://t.me/LucidCreationsMedia",
|
||||||
name: "Dev Updates",
|
name: "Dev Updates",
|
||||||
type: "secondary"
|
type: "secondary"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
type: "GitHub"
|
||||||
}
|
}
|
||||||
];
|
];
|
||||||
|
|
||||||
|
|||||||
@@ -3,6 +3,7 @@ import { Box, HStack, VStack } from "@chakra-ui/react";
|
|||||||
import CustomButton from "./Custom";
|
import CustomButton from "./Custom";
|
||||||
import links, { LinkObj } from "./data/links";
|
import links, { LinkObj } from "./data/links";
|
||||||
import KoFi from "./KoFi";
|
import KoFi from "./KoFi";
|
||||||
|
import GitHub from "./GitHub";
|
||||||
|
|
||||||
const Buttons = (): JSX.Element => {
|
const Buttons = (): JSX.Element => {
|
||||||
return (
|
return (
|
||||||
@@ -32,6 +33,10 @@ const Buttons = (): JSX.Element => {
|
|||||||
if (type === "ko-fi") {
|
if (type === "ko-fi") {
|
||||||
return <KoFi key={type} />;
|
return <KoFi key={type} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (type === "GitHub") {
|
||||||
|
return <GitHub key={type} />;
|
||||||
|
}
|
||||||
})}
|
})}
|
||||||
</HStack>
|
</HStack>
|
||||||
<VStack
|
<VStack
|
||||||
@@ -59,6 +64,10 @@ const Buttons = (): JSX.Element => {
|
|||||||
if (type === "ko-fi") {
|
if (type === "ko-fi") {
|
||||||
return <KoFi key={type} />;
|
return <KoFi key={type} />;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (type === "GitHub") {
|
||||||
|
return <GitHub key={type} />;
|
||||||
|
}
|
||||||
})}
|
})}
|
||||||
</VStack>
|
</VStack>
|
||||||
</Box>
|
</Box>
|
||||||
|
|||||||
Reference in New Issue
Block a user