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

Jump to bottom

Figma to React + Tailwind CSS Conversion #219

Closed
wants to merge 11 commits into from
Closed

Figma to React + Tailwind CSS Conversion #219

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d515da3
developed
Jul 4, 2024
ede1d58
Merge branch 'Dev' into Dev
Avinashshiyani Jul 4, 2024
1ac52e4
Merge branch 'Dev' into Avinashshiyani/Dev
sonylomo Jul 9, 2024
91f6fd2
Edit Form
Jul 23, 2024
ae4e10b
Single Item view page added
Jul 29, 2024
609ce27
finally completed
Jul 29, 2024
5cb2ea7
account issues
Jul 29, 2024
2225b7e
Merge branch 'Dev' into Dev
sonylomo Aug 6, 2024
5f44d8a
Merge branch 'Dev' into Dev
Avinashshiyani Aug 6, 2024
cf7ba87
Eslint Error Fixed
Avinashshiyani Aug 6, 2024
a34b219
Eslint Errror fixed
Avinashshiyani Aug 6, 2024
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
Binary file added src/assets/images/Drag and drop.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/singleItemImage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/smallSingle.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added src/assets/images/smallSingleTwo.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion src/components/admin/AdminLayout.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,13 @@
import { Outlet } from "react-router-dom";
import AdminHeader from "./AdminHeader";
import BottomNavBar from "./BottomNavBar";

import AdminMain from "./AdminMain";
function AdminLayout() {
return (
<div className="w-full overflow-hidden">
<AdminHeader />
<Outlet />
<AdminMain />
<BottomNavBar />
</div>
);
Expand Down
69 changes: 69 additions & 0 deletions src/components/admin/AdminMain.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,69 @@
import React from "react";
import AdminReportCard,
{
HighDemandCard,
TotalVisitsCustomCard,
ChartComponent,
BigChartComponent,
InvenOrderCard,
InvenOrderCardTwo,
totalSalesData,
totalOrdersData,
totalVisitsData,
totalVisitInnerCardData,
totalVisitInnerCardDataTwo,
} from "./AdminReportCard";

const AdminMain = () => {

return (
<>
<div className=" container-xl mx-auto grid px-[20px] sm:px-[40px] pt-[20px] gap-[24px] mb-20">

<div className="grid w-full sm:grid-cols-2 md:grid-cols-3 gap-[24px] items-center ">
<AdminReportCard name="sales" amount={80000} data={totalSalesData} />
<AdminReportCard name="orders" amount={400} data={totalOrdersData} />
<AdminReportCard name="visits" amount={10000} data={totalVisitsData} />
</div>

<div className="grid sm:grid-cols-2 md:grid-cols-3 gap-[24px]">
<HighDemandCard dataOne={totalVisitInnerCardData} name="Top 5 Places with Highest Demand for SYT Products" />
<HighDemandCard dataTwo={totalVisitInnerCardDataTwo} name="Top 5 Countries with Highest Demand for SYT Products" />
<TotalVisitsCustomCard />
</div>

<div className=" grid rounded-[12px] w-full border-[1px] border-[#EAECF0] p-[24px] font-poppins ">
<div className='flex p-[12px] text-[16px] font-[500] border-b-[1px] border-[#D0D0D0]'>
<span>Trends in Sales</span>
</div>
<div className="grid sm:grid-cols-1 md:grid-cols-3 lg:grid-cols-4 space-x-6">
<ChartComponent number={4000} />
<ChartComponent number={500} />
<ChartComponent number={750} />
<ChartComponent number={1000} />
</div>
<div className="mt-[48px]">
<BigChartComponent />
</div>
</div>

<div className="grid sm:grid-cols-2 gap-[24px]">
<HighDemandCard name="Top 5 Fastest Selling Items" />
<HighDemandCard bigCard={true} name="Top 5 Best Grossing Items" />
</div>

<div className="flex overflow-x-auto">
<InvenOrderCard name="Inventory" />
</div>

<div className="flex overflow-x-auto">
<InvenOrderCardTwo name="Orders" />
</div>

</div>

</>
);
};

export default AdminMain;
178 changes: 178 additions & 0 deletions src/pages/admin/shop/EditForm.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,178 @@
import React from 'react';
import { useForm } from 'react-hook-form';
import { ChevronDown, X } from 'lucide-react';
import DragDropImage from '../../../assets/images/Drag and drop.png';
import { twMerge } from 'tailwind-merge';

const EditForm = () => {
const { register, handleSubmit, formState: { errors } } = useForm();

const onSubmit = (data) => {
console.log(data);
};

return (
<div className='grid p-[32px]'>
<form onSubmit={handleSubmit(onSubmit)} className='grid'>
<div className='grid w-full sm:space-x-[18px] space-y-[20px] sm:space-y-0 sm:grid-cols-2'>
<div className='grid w-full'>
{/* edit box */}
<div className='w-full flex items-center justify-between text-[31px] font-[500] text-[#353535]'>
<div>
<span>Edit Item </span>
</div>
<div>
<span><X className='h-[40px] w-[40px]' /></span>
</div>
</div>
{/* border div */}
<div className='border-[1px] border-[#D0D0D0] mt-[23px]'></div>
{/* input */}
<div className='grid mt-[24px] space-y-[4px]'>
<div className='grid space-y-[14px]'>
<div className='grid space-y-[4px]'>
<div>
<Label>Price</Label>
</div>
<div className='grid items-center'>
<input
type="text"
placeholder='KES 0.00'
{...register('price', { required: 'Price is required' })}
className='rounded-[6px] py-[9px] px-[13px] w-full border-[1px] border-[#D1D5DB] placeholder:text-[#6B7280] placeholder:font-[400] placeholder:text-[14px]'
/>
{errors.price && <span className="text-red-500 text-sm">{errors.price.message}</span>}
</div>
</div>
<div className='grid space-y-[4px]'>
<div>
<Label>Size</Label>
</div>
<OptionSelection>
<Select {...register('size', { required: 'Size is required' })}>
<option value="" disabled selected>Select Size</option>
<Option>Small</Option>
<Option>Medium</Option>
<Option>Large</Option>
<Option>XL</Option>
</Select>
{errors.size && <span className="text-red-500 text-sm">{errors.size.message}</span>}
</OptionSelection>
</div>
<div className='grid space-y-[4px]'>
<div>
<Label>Color</Label>
</div>
<OptionSelection another="true">
<Select {...register('color', { required: 'Color is required' })}>
<option value="" disabled selected>Select Color</option>
<Option>Red</Option>
<Option>Green</Option>
<Option>Blue</Option>
<Option>Purple</Option>
</Select>
{errors.color && <span className="text-red-500 text-sm">{errors.color.message}</span>}
</OptionSelection>
</div>
<div className='grid space-y-[4px]'>
<div>
<Label>Description</Label>
</div>
<div className='grid'>
<textarea
{...register('description', { required: 'Description is required' })}
className='h-[115px] resize-none rounded-[6px] py-[9px] px-[13px] w-full border-[1px] border-[#D1D5DB] placeholder:text-[#6B7280] placeholder:font-[400] placeholder:text-[14px]'
/>
{errors.description && <span className="text-red-500 text-sm">{errors.description.message}</span>}
</div>
</div>
</div>
</div>
</div>
<div className='grid w-full justify-end sm:pr-[18px] items-end'>
<a href="#">
<img src={DragDropImage} className='w-full h-full' />
</a>
</div>
</div>
<div className='flex w-full justify-end'>
<div className='flex justify-center items-center space-x-[24px] py-[32px]'>
<div>
<EditButton type="button">Cancel</EditButton>
</div>
<div>
<EditButton type="submit">Edit</EditButton>
</div>
</div>
</div>
</form>
</div>
);
};

export default EditForm;

const Label = ({ children }) => {
return (
<label className='font-[400] text-[13px] text-[#4C4D4D]'>{children}</label>
);
};

const OptionSelection = ({ children, another = false }) => {
return (
<>
{another === "true" ? children :
<div className='relative flex items-center'>
<Select>
<option value="" disabled selected>Select Size</option>
<Option>Small</Option>
<Option>Medium</Option>
<Option>Large</Option>
<Option>XL</Option>
</Select>
<div className='absolute w-[20px] h-[20px] text-[#6B7280] right-[13px]'>
<ChevronDown />
</div>
</div>
}
</>
);
};

const Select = ({ children, ...props }) => {
return (
<select
{...props}
style={{
WebkitAppearance: 'none',
MozAppearance: 'none',
appearance: 'none',
}}
className="rounded-[6px] py-[9px] px-[13px] w-full border-[1px] border-[#D1D5DB] text-[#6B7280] font-[400] text-[14px]"
>
{children}
</select>
);
};

const Option = ({ children = "Small" }) => {
return (
<>
<option value={children}>{children}</option>
</>
);
};

const EditButton = ({ children = "Cancel", ...props }) => {
const difBtn = children !== "Cancel" && "bg-[#009975] text-white";
return (
<>
<button
{...props}
className={twMerge("font-[500] text-[13px] text-[#009975] px-[32px] py-[12px] border-[2px] border-[#009975] rounded-[8px]", difBtn)}
>
{children}
</button>
</>
);
};
Loading
Loading