138 front create a common card component

components/Container.js

@@ -0,0 +1,16 @@
+const Container = ({fill, className, style, children}) => {
+
+ return (
+ <div
+ className={"h-min flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 rounded-lg bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
+ >
+ <span
+ style={style}
+ className={className + " transition-all ease-in duration-100 overflow-hidden" + (fill ? "" : " bg-background rounded-md")}>
+ {children}
+ </span>
+ </div>
+ );
+};
+
+export default Container;

components/MainButton.js

@@ -1,20 +1,16 @@
-import Image from "next/image";
+const MainButton = ({ style, className, callback, type, disabled, children }) => {
 
-const MainButton = ({ label, iconSrc, callback, type, isDisabled }) => {
  return (
  <button
  type={type}
  onClick={callback}
- disabled={isDisabled}
- className={"w-80 relative inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg group bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
+ disabled={disabled}
+ className={"inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg bg-gradient-to-br from-primary to-secondary"}
  >
- <span className={"w-80 items-center justify-between align-center flex px-5 py-2.5 transition-all ease-in duration-75 " + (isDisabled ? "" : "bg-background rounded-md group-hover:bg-opacity-0")}>
- <p className="text-xl">{label}</p>
- {iconSrc && !isDisabled ? (
- <Image src={iconSrc} width={48} height={48} alt="icon"></Image>
- ) : (
- <></>
- )}
+ <span
+ style={style}
+ className={className + " transition-all ease-in duration-100 " + (disabled ? "" : "bg-background rounded-md hover:bg-opacity-0")}>
+ {children}
  </span>
  </button>
  );

components/SimpleButton.js

@@ -0,0 +1,18 @@
+import Image from "next/image";
+import MainButton from "./MainButton";
+
+const SimpleButton = ({ label, iconSrc, callback, type, disabled }) => {
+
+ return (
+ <MainButton type={type} callback={callback} disabled={disabled} className={"w-80 items-center justify-between align-center flex px-5 py-2.5"}>
+ <p className="text-xl">{label}</p>
+ {iconSrc && !disabled ? (
+ <Image src={iconSrc} width={48} height={48} alt="icon"></Image>
+ ) : (
+ <></>
+ )}
+ </MainButton>
+ );
+};
+
+export default SimpleButton;

pages/approve.js

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 import { useRouter } from "next/router";
 import { ToastContainer, toast } from "react-toastify";
 import React, { useState, useEffect } from "react";
@@ -136,12 +136,12 @@ const ApprovePage = () => {
  you and the license's provider
  </p>
  <div className="flex">
- <MainButton
+ <SimpleButton
  label={alreadyOwned ? "Already owned" : (!waitingTrans ? "Get license" : "Loading...")}
  iconSrc={"/add_icon.svg"}
  callback={handleGetLicense}
- isDisabled={alreadyOwned}
- ></MainButton>
+ disabled={alreadyOwned}
+ ></SimpleButton>
  </div>
  </section>
  ) : (

pages/create.js

@@ -1,6 +1,6 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 import { ToastContainer, toast } from "react-toastify";
 
 import React, { useState, useEffect } from "react";
@@ -161,11 +161,11 @@ const CreatePage = () => {
  ></input>
  </ul>
  <div className="flex w-3/4 justify-between items-center">
- <MainButton
+ <SimpleButton
  type="submit"
  label={!waitingTrans ? "Create" : "Loading..."}
  iconSrc={"/add_icon.svg"}
- ></MainButton>
+ ></SimpleButton>
  {licenseId ? (
  <h1 className="text-2xl text-center">
  Your license has the id number:

pages/index.js

@@ -1,7 +1,7 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
 import { useRouter } from "next/router";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 
 import dynamic from "next/dynamic";
 const Animator = dynamic(
@@ -30,7 +30,7 @@ const ApprovePage = () => {
  return (
  <div className="bg-background ">
  <div className="absolute top-6 right-12">
- <MainButton
+ <SimpleButton
  callback={navigateCreate}
  label="Create license"
  iconSrc="/arrow_forward.svg"