diff --git a/.eslintrc.json b/.eslintrc.json index bffb357..ea782d7 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -1,3 +1,3 @@ -{ - "extends": "next/core-web-vitals" -} +{ + "extends": "next/core-web-vitals" +} diff --git a/package.json b/package.json index 6253108..cd8df4d 100644 --- a/package.json +++ b/package.json @@ -1,35 +1,37 @@ -{ - "name": "pixels-qr-code-fe", - "version": "0.1.0", - "private": true, - "scripts": { - "dev": "next dev", - "build": "next build", - "start": "next start", - "lint": "next lint" - }, - "dependencies": { - "@heroicons/react": "^2.0.1", - "@hookform/resolvers": "^2.9.7", - "next": "12.2.5", - "qrcode.react": "^3.1.0", - "react": "18.2.0", - "react-dom": "18.2.0", - "react-file-base64": "^1.0.3", - "react-hook-form": "^7.34.2", - "react-icons": "^4.4.0", - "save-svg-as-png": "^1.4.17", - "yup": "^0.32.11" - }, - "devDependencies": { - "@types/node": "18.7.12", - "@types/react": "18.0.17", - "@types/react-dom": "18.0.6", - "autoprefixer": "^10.4.8", - "eslint": "8.22.0", - "eslint-config-next": "12.2.5", - "postcss": "^8.4.16", - "tailwindcss": "^3.1.8", - "typescript": "4.7.4" - } -} +{ + "name": "pixels-qr-code-fe", + "version": "0.1.0", + "private": true, + "scripts": { + "dev": "next dev", + "build": "next build", + "start": "next start", + "lint": "next lint" + }, + "dependencies": { + "@heroicons/react": "^2.0.1", + "@hookform/resolvers": "^2.9.7", + "next": "12.2.5", + "qrcode.react": "^3.1.0", + "react": "18.2.0", + "react-beautiful-dnd": "^13.1.1", + "react-dom": "18.2.0", + "react-file-base64": "^1.0.3", + "react-hook-form": "^7.34.2", + "react-icons": "^4.4.0", + "react-select": "^5.4.0", + "save-svg-as-png": "^1.4.17", + "yup": "^0.32.11" + }, + "devDependencies": { + "@types/node": "18.7.12", + "@types/react": "18.0.17", + "@types/react-dom": "18.0.6", + "autoprefixer": "^10.4.8", + "eslint": "8.22.0", + "eslint-config-next": "12.2.5", + "postcss": "^8.4.16", + "tailwindcss": "^3.1.8", + "typescript": "4.7.4" + } +} diff --git a/src/Layout/Layout.tsx b/src/Layout/Layout.tsx index 4211a83..e6385f0 100644 --- a/src/Layout/Layout.tsx +++ b/src/Layout/Layout.tsx @@ -1,28 +1,28 @@ -import Head from "next/head"; -import { Footer } from "./Navigation/Footer"; -import { Header } from "./Navigation/Header"; -import ListButton from "./Navigation/ListButton"; - -const Layout = (props: any) => { - return ( -
- - Pixels QrCode - - - -
-
-
-
- -
- {props.children} -
-
-
- ); -}; - -export default Layout; +import Head from "next/head"; +import { Footer } from "./Navigation/Footer"; +import { Header } from "./Navigation/Header"; +import ListButton from "./Navigation/ListButton"; + +const Layout = (props: any) => { + return ( +
+ + Pixels QrCode + + + +
+
+
+
+ +
+ {props.children} +
+
+
+ ); +}; + +export default Layout; diff --git a/src/Layout/Main/AudioPlayer/AddButton/index.tsx b/src/Layout/Main/AudioPlayer/AddButton/index.tsx index 2341b74..56a488a 100644 --- a/src/Layout/Main/AudioPlayer/AddButton/index.tsx +++ b/src/Layout/Main/AudioPlayer/AddButton/index.tsx @@ -1,50 +1,50 @@ -import React, { useState } from "react"; -import { FormInput, FormSelect } from "../../../../components/Form"; - -const AddButton = ({ register }) => { - const [isChecked, setIsChecked] = useState(true); - return ( -
-
-
Button
- -
- {isChecked ? ( - "" - ) : ( -
-
- - - - - - - -
-
- -
- {/* */} -
- )} -
- ); -}; - -export default AddButton; +import React, { useState } from "react"; +import { FormInput, FormSelect } from "../../../../components/Form"; + +const AddButton = ({ register }) => { + const [isChecked, setIsChecked] = useState(true); + return ( +
+
+
Button
+ +
+ {isChecked ? ( + "" + ) : ( +
+
+ + + + + + + +
+
+ +
+ {/* */} +
+ )} +
+ ); +}; + +export default AddButton; diff --git a/src/Layout/Main/AudioPlayer/BasicInfo/index.tsx b/src/Layout/Main/AudioPlayer/BasicInfo/index.tsx index 7e5789d..b0da653 100644 --- a/src/Layout/Main/AudioPlayer/BasicInfo/index.tsx +++ b/src/Layout/Main/AudioPlayer/BasicInfo/index.tsx @@ -1,56 +1,56 @@ -import React from "react"; -import { FormInput, FormTextArea } from "../../../../components/Form"; -import { Heading } from "../../../../Typography"; -import { HiOutlineExclamationCircle } from "react-icons/hi"; - -const BasicInfo = ({ register, errors }) => { - return ( -
-
- - - Basic Information - - - Provide more information about your MP3, such as a title and artist. - Add an optional button to a website of your choice. - - - - -
-
- ); -}; - -export default BasicInfo; +import React from "react"; +import { FormInput, FormTextArea } from "../../../../components/Form"; +import { Heading } from "../../../../Typography"; +import { HiOutlineExclamationCircle } from "react-icons/hi"; + +const BasicInfo = ({ register, errors }) => { + return ( +
+
+ + + Basic Information + + + Provide more information about your MP3, such as a title and artist. + Add an optional button to a website of your choice. + + + + +
+
+ ); +}; + +export default BasicInfo; diff --git a/src/Layout/Main/AudioPlayer/index.tsx b/src/Layout/Main/AudioPlayer/index.tsx index b1a156b..bcb03cf 100644 --- a/src/Layout/Main/AudioPlayer/index.tsx +++ b/src/Layout/Main/AudioPlayer/index.tsx @@ -1,88 +1,88 @@ -import React from "react"; -import { useForm, SubmitHandler } from "react-hook-form"; -import { FormInput } from "../../../components/Form"; -import Line from "../../../components/Line"; -import { Heading } from "../../../Typography"; -import AdvanceOption from "../../Universal/AdvanceOption"; -import AddButton from "./AddButton"; -import BasicInfo from "./BasicInfo"; - -interface FormAudioProps { - nameQR: string; - spotify: string; - title: string; - moreInfo: string; - nameButton: string; - website: string; - linkRedirect: string; - share: boolean; -} - -const AudioPlay = () => { - const { - register, - formState: { errors }, - handleSubmit, - } = useForm(); - - const onSubmit: SubmitHandler = (data) => console.log(data); - return ( - <> -
- Audio Player QR Code - -
- - - - - - - - - - -
-
-
-

QR Code

-

Test

- -
-
- - ); -}; - -export default AudioPlay; +import React from "react"; +import { useForm, SubmitHandler } from "react-hook-form"; +import { FormInput } from "../../../components/Form"; +import Line from "../../../components/Line"; +import { Heading } from "../../../Typography"; +import AdvanceOption from "../../Universal/AdvanceOption"; +import AddButton from "./AddButton"; +import BasicInfo from "./BasicInfo"; + +interface FormAudioProps { + nameQR: string; + spotify: string; + title: string; + moreInfo: string; + nameButton: string; + website: string; + linkRedirect: string; + share: boolean; +} + +const AudioPlay = () => { + const { + register, + formState: { errors }, + handleSubmit, + } = useForm(); + + const onSubmit: SubmitHandler = (data) => console.log(data); + return ( + <> +
+ Audio Player QR Code + +
+ + + + + + + + + + +
+
+
+

QR Code

+

Test

+ +
+
+ + ); +}; + +export default AudioPlay; diff --git a/src/Layout/Main/SocialMedia/BasicInfo/index.tsx b/src/Layout/Main/SocialMedia/BasicInfo/index.tsx index 9d093bc..efa2a0f 100644 --- a/src/Layout/Main/SocialMedia/BasicInfo/index.tsx +++ b/src/Layout/Main/SocialMedia/BasicInfo/index.tsx @@ -1,58 +1,58 @@ -import React from "react"; -import { FormInput, FormTextArea } from "../../../../components/Form"; -import { Heading } from "../../../../Typography"; -import { HiOutlineExclamationCircle } from "react-icons/hi"; - -const BasicInfo = ({ register, errors }) => { - return ( -
- -
-
- - - Basic Information - - Fields marked with a * are required information. - - - -
-
- ); -}; - -export default BasicInfo; +import React from "react"; +import { FormInput, FormTextArea } from "../../../../components/Form"; +import { Heading } from "../../../../Typography"; +import { HiOutlineExclamationCircle } from "react-icons/hi"; + +const BasicInfo = ({ register, errors }) => { + return ( +
+ +
+
+ + + Basic Information + + Fields marked with a * are required information. + + + +
+
+ ); +}; + +export default BasicInfo; diff --git a/src/Layout/Main/SocialMedia/Social/AddMore.tsx b/src/Layout/Main/SocialMedia/Social/AddMore.tsx index 4f4196a..bd2dc5e 100644 --- a/src/Layout/Main/SocialMedia/Social/AddMore.tsx +++ b/src/Layout/Main/SocialMedia/Social/AddMore.tsx @@ -1,51 +1,51 @@ -import React from "react"; -import { ButtonIcon } from "../../../../components/Button"; -import { - FaGlobe, - FaEnvelope, - FaInstagram, - FaFacebook, - FaGithub, - FaYoutube, - FaLinkedin, - FaTwitter, -} from "react-icons/fa"; - -const AddMore = ({ append }) => { - return ( -
-

Add more

- - Click on the icon to add a social media profile. - -
- - - - - - - - - - - - - - - - - - - - - - - - -
-
- ); -}; - -export default AddMore; +import React from "react"; +import { ButtonIcon } from "../../../../components/Button"; +import { + FaGlobe, + FaEnvelope, + FaInstagram, + FaFacebook, + FaGithub, + FaYoutube, + FaLinkedin, + FaTwitter, +} from "react-icons/fa"; + +const AddMore = ({ append }) => { + return ( +
+

Add more

+ + Click on the icon to add a social media profile. + +
+ + + + + + + + + + + + + + + + + + + + + + + + +
+
+ ); +}; + +export default AddMore; diff --git a/src/Layout/Main/SocialMedia/Social/IconField.tsx b/src/Layout/Main/SocialMedia/Social/IconField.tsx index 28688ef..badfc9e 100644 --- a/src/Layout/Main/SocialMedia/Social/IconField.tsx +++ b/src/Layout/Main/SocialMedia/Social/IconField.tsx @@ -1,36 +1,36 @@ -import React from "react"; -import { - FaGlobe, - FaEnvelope, - FaInstagram, - FaFacebook, - FaGithub, - FaYoutube, - FaLinkedin, - FaTwitter, -} from "react-icons/fa"; - -const IconField = ({ field }) => { - switch (field.type) { - case "Website": - return ; - case "Email": - return ; - case "Instagram": - return ; - case "Facebook": - return ; - case "Twitter": - return ; - case "Youtube": - return ; - case "Github": - return ; - case "Linkedin": - return ; - default: - return ; - } -}; - -export default IconField; +import React from "react"; +import { + FaGlobe, + FaEnvelope, + FaInstagram, + FaFacebook, + FaGithub, + FaYoutube, + FaLinkedin, + FaTwitter, +} from "react-icons/fa"; + +const IconField = ({ field }) => { + switch (field.type) { + case "Website": + return ; + case "Email": + return ; + case "Instagram": + return ; + case "Facebook": + return ; + case "Twitter": + return ; + case "Youtube": + return ; + case "Github": + return ; + case "Linkedin": + return ; + default: + return ; + } +}; + +export default IconField; diff --git a/src/Layout/Main/SocialMedia/Social/index.tsx b/src/Layout/Main/SocialMedia/Social/index.tsx index a919eb7..45dd7c0 100644 --- a/src/Layout/Main/SocialMedia/Social/index.tsx +++ b/src/Layout/Main/SocialMedia/Social/index.tsx @@ -1,87 +1,87 @@ -import React from "react"; -import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; -import { FaEllipsisV } from "react-icons/fa"; -import { TiDelete } from "react-icons/ti"; -import { HiOutlinePresentationChartLine } from "react-icons/hi"; -import { Heading } from "../../../../Typography"; -import AddMore from "./addMore"; -import IconField from "./iconField"; - -const Social = ({ fields, register, remove, append, swap }) => { - const handleOnDragEnd = (result) => { - if (!result.destination) return; - swap(result.source.index, result.destination.index); - }; - return ( -
- - - Social Media - - - - {(provided) => ( -
- {fields.map((field, index) => ( - - {(provided) => ( -
-
- -
-
- - - -
-
- )} - - ))} - - {provided.placeholder} -
- )} - - - -
- ); -}; - -export default Social; +import React from "react"; +import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd"; +import { FaEllipsisV } from "react-icons/fa"; +import { TiDelete } from "react-icons/ti"; +import { HiOutlinePresentationChartLine } from "react-icons/hi"; +import { Heading } from "../../../../Typography"; +import AddMore from "./AddMore"; +import IconField from "./IconField"; + +const Social = ({ fields, register, remove, append, swap }) => { + const handleOnDragEnd = (result) => { + if (!result.destination) return; + swap(result.source.index, result.destination.index); + }; + return ( +
+ + + Social Media + + + + {(provided) => ( +
+ {fields.map((field, index) => ( + + {(provided) => ( +
+
+ +
+
+ + + +
+
+ )} + + ))} + + {provided.placeholder} +
+ )} + + + +
+ ); +}; + +export default Social; diff --git a/src/Layout/Main/SocialMedia/index.tsx b/src/Layout/Main/SocialMedia/index.tsx index ba79203..c9b400d 100644 --- a/src/Layout/Main/SocialMedia/index.tsx +++ b/src/Layout/Main/SocialMedia/index.tsx @@ -1,69 +1,69 @@ -import React from "react"; -import { - useForm, - useFieldArray, - SubmitHandler, - Control, -} from "react-hook-form"; - -import { Heading } from "../../../Typography"; -import { ButtonSubmit } from "../../../components/Button"; -import Preview from "../../Preview"; -import BasicInfo from "./BasicInfo"; -import Social from "./Social"; -import AdvanceOption from "../../Universal/AdvanceOption"; - -interface FormSosmedProps { - nameQR: string; - title: string; - aboutUs: string; - shareButton: boolean; - socialMedia: { - type: string; - link: string; - text: string; - }[]; -} - -export const SocialMedia = () => { - const { - register, - formState: { errors }, - handleSubmit, - control, - } = useForm(); - - let { fields, append, remove, swap } = useFieldArray({ - name: "socialMedia", - control, - }); - - const onSubmit: SubmitHandler = (data) => console.log(data); - - return ( - <> -
- Social Media QR Code -
- - -
- - - -
- - - - -
- - - ); -}; +import React from "react"; +import { + useForm, + useFieldArray, + SubmitHandler, + Control, +} from "react-hook-form"; + +import { Heading } from "../../../Typography"; +import { ButtonSubmit } from "../../../components/Button"; +import Preview from "../../Preview"; +import BasicInfo from "./BasicInfo"; +import Social from "./Social"; +import AdvanceOption from "../../Universal/AdvanceOption"; + +interface FormSosmedProps { + nameQR: string; + title: string; + aboutUs: string; + shareButton: boolean; + socialMedia: { + type: string; + link: string; + text: string; + }[]; +} + +export const SocialMedia = () => { + const { + register, + formState: { errors }, + handleSubmit, + control, + } = useForm(); + + let { fields, append, remove, swap } = useFieldArray({ + name: "socialMedia", + control, + }); + + const onSubmit: SubmitHandler = (data) => console.log(data); + + return ( + <> +
+ Social Media QR Code +
+ + +
+ + + +
+ + + + +
+ + + ); +}; diff --git a/src/Layout/Main/Url/PreviewQR.tsx b/src/Layout/Main/Url/PreviewQR.tsx index 672ce2b..8ac53b0 100644 --- a/src/Layout/Main/Url/PreviewQR.tsx +++ b/src/Layout/Main/Url/PreviewQR.tsx @@ -1,32 +1,32 @@ -import React from "react"; -import { QRCodeSVG } from "qrcode.react"; -import { ButtonSubmit } from "components/Button"; - -const PreviewQR = ({ url, downloadpng }) => { - return ( -
- -

{url}

- Save QR Code -
- ); -}; - -export default PreviewQR; +import React from "react"; +import { QRCodeSVG } from "qrcode.react"; +import { ButtonSubmit } from "components/Button"; + +const PreviewQR = ({ url, downloadpng }) => { + return ( +
+ +

{url}

+ Save QR Code +
+ ); +}; + +export default PreviewQR; diff --git a/src/Layout/Main/Url/Url.tsx b/src/Layout/Main/Url/Url.tsx index 208713d..d6d9273 100644 --- a/src/Layout/Main/Url/Url.tsx +++ b/src/Layout/Main/Url/Url.tsx @@ -1,44 +1,44 @@ -import React, { useState } from "react"; -import { TextArea } from "components/Form"; -import { Heading } from "Typography"; -import { ButtonSubmit } from "components/Button"; -import PreviewQR from "./PreviewQR"; - -export const Url = () => { - const saveSvgAsPng = require("save-svg-as-png"); - const imageOptions = { - scale: 5, - encoderOptions: 1, - backgroundColor: "white", - }; - - const [url, setUrl] = useState(""); - - const downloadpng = () => { - saveSvgAsPng.saveSvgAsPng( - document.getElementById("svg-chart"), - "qr.png", - imageOptions - ); - }; - - return ( - <> -
- Enter Your URL -

- You can track scans with dynamic QR codes, click here to get started -

-