Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Just Fix Structure File #6

Open
wants to merge 1 commit into
base: staging
Choose a base branch
from
Open

Just Fix Structure File #6

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions .eslintrc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"extends": "next/core-web-vitals"
}
{
"extends": "next/core-web-vitals"
}
72 changes: 37 additions & 35 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
}
56 changes: 28 additions & 28 deletions src/Layout/Layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="bg-white text-black">
<Head>
<title>Pixels QrCode</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="px-4 md:px-20">
<Header />
<div className="w-full flex-wrap md:flex justify-right bg-green-100 rounded-lg p-5 md:p-10 my-12">
<div className="basis-full">
<ListButton />
</div>
{props.children}
</div>
<Footer />
</main>
</div>
);
};

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 (
<div className="bg-white text-black">
<Head>
<title>Pixels QrCode</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<main className="px-4 md:px-20">
<Header />
<div className="w-full flex-wrap md:flex justify-right bg-green-100 rounded-lg p-5 md:p-10 my-12">
<div className="basis-full">
<ListButton />
</div>
{props.children}
</div>
<Footer />
</main>
</div>
);
};
export default Layout;
100 changes: 50 additions & 50 deletions src/Layout/Main/AudioPlayer/AddButton/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,50 +1,50 @@
import React, { useState } from "react";
import { FormInput, FormSelect } from "../../../../components/Form";

const AddButton = ({ register }) => {
const [isChecked, setIsChecked] = useState(true);
return (
<div className="w-full rounded-lg p-5 border border-green-800/50 mt-2">
<div className="flex justify-between">
<div className="order-first">Button</div>
<label
htmlFor="small-toggle"
className="order-last mt-1 relative items-center cursor-pointer"
>
<input
type="checkbox"
onChange={() => setIsChecked(!isChecked)}
id="small-toggle"
className="sr-only peer"
/>
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-green-900"></div>
</label>
</div>
{isChecked ? (
""
) : (
<div className="flex place-items-center mt-4">
<div className="basis-1/3">
<FormSelect register={register} name="nameButton">
<option>Buy Now</option>
<option>View Full Album</option>
<option>Visit Us Online</option>
<option>Learn More</option>
<option>Custom</option>
</FormSelect>
</div>
<div className="basis-2/3 ml-3">
<FormInput
register={register}
name="linkRedirect"
placeholder="www.yourwebsite.com"
/>
</div>
{/* <FormInput register={register} name="nameButton" placeholder="Please type your link title" /> */}
</div>
)}
</div>
);
};

export default AddButton;
import React, { useState } from "react";
import { FormInput, FormSelect } from "../../../../components/Form";
const AddButton = ({ register }) => {
const [isChecked, setIsChecked] = useState(true);
return (
<div className="w-full rounded-lg p-5 border border-green-800/50 mt-2">
<div className="flex justify-between">
<div className="order-first">Button</div>
<label
htmlFor="small-toggle"
className="order-last mt-1 relative items-center cursor-pointer"
>
<input
type="checkbox"
onChange={() => setIsChecked(!isChecked)}
id="small-toggle"
className="sr-only peer"
/>
<div className="w-9 h-5 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-4 after:w-4 after:transition-all dark:border-gray-600 peer-checked:bg-green-900"></div>
</label>
</div>
{isChecked ? (
""
) : (
<div className="flex place-items-center mt-4">
<div className="basis-1/3">
<FormSelect register={register} name="nameButton">
<option>Buy Now</option>
<option>View Full Album</option>
<option>Visit Us Online</option>
<option>Learn More</option>
<option>Custom</option>
</FormSelect>
</div>
<div className="basis-2/3 ml-3">
<FormInput
register={register}
name="linkRedirect"
placeholder="www.yourwebsite.com"
/>
</div>
{/* <FormInput register={register} name="nameButton" placeholder="Please type your link title" /> */}
</div>
)}
</div>
);
};
export default AddButton;
112 changes: 56 additions & 56 deletions src/Layout/Main/AudioPlayer/BasicInfo/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div>
<div>
<Heading type="h2">
<HiOutlineExclamationCircle className="w-6 h-6 inline -mt-1 mr-1 text-slate-600" />
Basic Information
</Heading>
<span>
Provide more information about your MP3, such as a title and artist.
Add an optional button to a website of your choice.
</span>
<label className="block mt-4">
<span className="text-gray-700">Title*</span>
<FormInput
register={register}
name="title"
placeholder="e.g. Connect with us in social media"
/>
{errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)}
</label>
<label className="block mt-4">
<span className="text-gray-700">More Info</span>
<FormInput
register={register}
name="moreInfo"
placeholder="e.g. Name of Artist and album"
/>
{/* {errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)} */}
</label>
<label className="block mt-4">
<span className="text-gray-700">Website</span>
<FormInput
register={register}
name="website"
placeholder="www.yourwebsite.com"
/>
{/* {errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)} */}
</label>
</div>
</div>
);
};

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 (
<div>
<div>
<Heading type="h2">
<HiOutlineExclamationCircle className="w-6 h-6 inline -mt-1 mr-1 text-slate-600" />
Basic Information
</Heading>
<span>
Provide more information about your MP3, such as a title and artist.
Add an optional button to a website of your choice.
</span>
<label className="block mt-4">
<span className="text-gray-700">Title*</span>
<FormInput
register={register}
name="title"
placeholder="e.g. Connect with us in social media"
/>
{errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)}
</label>
<label className="block mt-4">
<span className="text-gray-700">More Info</span>
<FormInput
register={register}
name="moreInfo"
placeholder="e.g. Name of Artist and album"
/>
{/* {errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)} */}
</label>
<label className="block mt-4">
<span className="text-gray-700">Website</span>
<FormInput
register={register}
name="website"
placeholder="www.yourwebsite.com"
/>
{/* {errors.nameQR && (
<p className="text-red-500 text-sm">Title is required!</p>
)} */}
</label>
</div>
</div>
);
};
export default BasicInfo;
Loading