buttons ay

devcon/src/components/common/layouts/footer/Footer.tsx

@@ -19,6 +19,7 @@ import IconTelegram from 'assets/icons/telegram.svg'
 import IconDiscord from 'assets/icons/discord.svg'
 import { CodeOfConduct, TermsOfService } from './Legal'
 import { Modal } from 'components/common/modal'
+import { Button } from 'lib/components/button'
 
 type SocialMediaProps = {
   onShare?: () => void
@@ -128,6 +129,50 @@ export const Footer = () => {
             </div>
 
             <div className={css['col-5']}>
+              <Button size="sm" fill>
+                I am the text
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                />
+              </Button>
+              <Button size="md" fill>
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                />
+                I am the text
+              </Button>
+              <Button size="lg" fill className="flex">
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                  className="icon mr-1"
+                />
+                I am the text
+              </Button>
+              <Button size="lg" rounded fill>
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                />
+                Rounded
+              </Button>
+
+              <Button size="md" circle className="border-2">
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                />
+              </Button>
+              <Button size="md" square fill>
+                <IconArrowUpward
+                  onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}
+                  style={{ cursor: 'pointer' }}
+                />
+                {/* Square */}
+              </Button>
+
               <div className={css['scroll-up']}>
                 <IconArrowUpward
                   onClick={() => window.scrollTo({ top: 0, behavior: 'smooth' })}

lib/components/button/button.tsx

@@ -0,0 +1,193 @@
+import React from "react";
+import { motion } from "framer-motion";
+
+// Size: font size, padding, height/width
+
+type ColorType = "opaque" | "purple" | "red" | "light-purple";
+type SizeType = "sm" | "md" | "lg";
+
+type ButtonProps = {
+  rounded?: boolean;
+  circle?: boolean;
+  square?: boolean;
+  borderless?: boolean;
+  fill?: boolean;
+  size?: SizeType;
+  color?: ColorType;
+  [key: string]: any;
+};
+
+export const colors = {
+  opaque: {
+    border: "b-[#9FA1B7]",
+    background: "bg-[transparent]",
+    text: "text-[#9FA1B7]",
+    hover: "#9fa1b730",
+    icon: "#9FA1B7",
+  },
+  purple: {
+    border: "b-[#9FA1B7]",
+    background: "bg-[#ffffff0]",
+    text: "text-[#9FA1B7]",
+    hover: "#9fa1b730",
+    icon: "#9FA1B7",
+  },
+  red: {
+    border: "b-[purple]",
+    background: "bg-[#dcdeff]",
+    text: "text-[blue]",
+    hover: "#dcdeff20",
+    icon: "#9FA1B7",
+  },
+} as {
+  [K in ColorType]: {
+    border: string;
+    background: string;
+    text: string;
+    hover: string;
+    icon: string;
+  };
+};
+
+export const sizes = {
+  sm: {
+    text: "text-sm",
+    icon: "[&>svg]:text-[0.85em]",
+    padding: "py-1 px-2",
+  },
+  md: {
+    text: "text-md",
+    icon: "[&>svg]:text-[0.825em]",
+    padding: "py-1 px-2.5",
+  },
+  lg: {
+    text: "text-lg",
+    icon: "[&>svg]:text-[0.8em]",
+    padding: "py-1 px-3",
+  },
+} as {
+  [K in SizeType]: {
+    text: string;
+    padding: string;
+    icon: string;
+  };
+};
+
+const applySize = (
+  size: ButtonProps["size"] = "md",
+  square?: boolean,
+  circle?: boolean
+) => {
+  const sizeClasses = [];
+  const { icon, text, padding } = sizes[size];
+
+  sizeClasses.push(text);
+
+  if (square || circle) {
+    sizeClasses.push("h-[2.5em] w-[2.5em]");
+
+    if (circle) sizeClasses.push("rounded-full");
+  } else {
+    sizeClasses.push(icon);
+    sizeClasses.push(padding);
+  }
+
+  return sizeClasses.join(" ");
+};
+
+const applyColor = (
+  color: ColorType = "opaque",
+  fill?: boolean,
+  borderless?: boolean
+) => {
+  const colorClasses = [];
+  const { border, background, text } = colors[color];
+
+  if (fill) colorClasses.push(background);
+  if (!borderless) colorClasses.push(border);
+  colorClasses.push(text);
+
+  return colorClasses.join(" ");
+};
+
+export const Button = (props: ButtonProps) => {
+  const {
+    className: classNameFromProps,
+    rounded = true,
+    circle,
+    square,
+    fill,
+    color = "opaque",
+    borderless,
+    size,
+    style,
+    ...rest
+  } = props;
+
+  const classComponents = [
+    "inline-flex items-center justify-center",
+    borderless ? "" : "border border-solid",
+    rounded ? "rounded-md" : "",
+    applyColor(color, fill, borderless),
+    applySize(size, square, circle),
+  ];
+
+  let className = classComponents.join(" ");
+
+  if (classNameFromProps) className += ` ${classNameFromProps}`;
+
+  const chosenColor = colors[color];
+
+  return (
+    <motion.button
+      className={className}
+      whileHover={{ backgroundColor: chosenColor.hover }}
+      style={
+        {
+          "--color-icon": chosenColor.icon,
+          "--icon-color": chosenColor.icon,
+          ...style,
+        } as any
+      }
+      {...rest}
+    >
+      {props.children}
+    </motion.button>
+  );
+};
+
+/*
+  <Button
+
+  >
+
+  </Button>
+*/
+
+/*
+  Sizes
+
+  Colors
+
+  types:
+    Rounded
+    Squared
+    Icon support
+    Centering
+*/
+
+// let className = `border-2 w-[40px] h-[40px] border-solid ${css['arrow-button']}`
+// <motion.button
+//   disabled={!canBack}
+//   className={className}
+//   initial={{
+//     background: '#ffffff80',
+//   }}
+//   whileHover={{
+//     background: '#9fa1b730',
+//   }}
+//   aria-label="Slide left"
+//   onClick={() => props.sliderRef.current?.slickPrev()}
+// >
+//   <ChevronLeft />
+// </motion.button>

lib/components/button/index.tsx

@@ -0,0 +1,3 @@
+import { Button } from "./button";
+
+export { Button };

lib/components/lib-import.tsx

@@ -1,4 +1,4 @@
-import Button from "lib/components/button";
+import { Button } from "lib/components/button";
 
 export default () => {
   return <Button />;

lib/package.json

@@ -7,6 +7,7 @@
   "dependencies": {
     "@types/react": "^18.2.28",
     "@types/react-dom": "^18.2.13",
+    "framer-motion": "^10.16.16",
     "next": "13.4.9",
     "react-slick": "^0.29.0"
   }

lib/yarn.lock

@@ -2,6 +2,18 @@
 # yarn lockfile v1
 
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/[email protected]":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@next/[email protected]":
   version "13.4.9"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-13.4.9.tgz#b77759514dd56bfa9791770755a2482f4d6ca93e"
@@ -117,6 +129,15 @@ enquire.js@^2.1.6:
   resolved "https://registry.yarnpkg.com/enquire.js/-/enquire.js-2.1.6.tgz#3e8780c9b8b835084c3f60e166dbc3c2a3c89814"
   integrity sha512-/KujNpO+PT63F7Hlpu4h3pE3TokKRHN26JYmQpPyjkRD/N57R7bPDNojMXdi7uveAKjYB7yQnartCxZnFWr0Xw==
 
+framer-motion@^10.16.16:
+  version "10.16.16"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-10.16.16.tgz#a10a03e1190a717109163cfff212a84c8ad11b0c"
+  integrity sha512-je6j91rd7NmUX7L1XHouwJ4v3R+SO4umso2LUcgOct3rHZ0PajZ80ETYZTajzEXEl9DlKyzjyt4AvGQ+lrebOw==
+  dependencies:
+    tslib "^2.4.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
 glob-to-regexp@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"