generated from ngyngcphu/react-template
-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(home_page): add component Orders, Slides, images and Edit Homepa…
…ge and AppLayout
- Loading branch information
1 parent
78c9932
commit c3ef3cd
Showing
14 changed files
with
1,867 additions
and
25 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1 +0,0 @@ | ||
VITE_BACKEND_URL= | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,54 @@ | ||
{ | ||
"orders": [ | ||
{ | ||
"id": "1233-defc", | ||
"status": "Progressing", | ||
"location": "Thu Duc, Ho Chi Minh, Viet Nam", | ||
"number": 2, | ||
"fileName": "file1.pdf", | ||
"pageNumber": 10, | ||
"coins": 50, | ||
"paid": "Paid" | ||
}, | ||
{ | ||
"id": "1245-afce", | ||
"status": "Ready", | ||
"location": "Tan Phu, Ho Chi Minh, Viet Nam", | ||
"number": 2, | ||
"fileName": "file2.docx", | ||
"pageNumber": 20, | ||
"coins": 75, | ||
"paid": "Paid" | ||
}, | ||
{ | ||
"id": "1267-rfce", | ||
"status": "Done", | ||
"location": "Tan Phu, Ho Chi Minh, Viet Nam", | ||
"number": 2, | ||
"fileName": "file3.txt", | ||
"pageNumber": 5, | ||
"coins": 30, | ||
"paid": "Not Paid" | ||
}, | ||
{ | ||
"id": "1267-rfce", | ||
"status": "Canceled", | ||
"location": "Tan Phu, Ho Chi Minh, Viet Nam", | ||
"number": 2, | ||
"fileName": "file3.txt", | ||
"pageNumber": 5, | ||
"coins": 30, | ||
"paid": "Not Paid" | ||
}, | ||
{ | ||
"id": "1267-rfce", | ||
"status": "Done", | ||
"location": "Tan Phu, Ho Chi Minh, Viet Nam", | ||
"number": 2, | ||
"fileName": "file3.txt", | ||
"pageNumber": 5, | ||
"coins": 30, | ||
"paid": "Paid" | ||
} | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Empty file.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; | ||
import { useRef } from 'react'; | ||
import location from '../assets/location-marker.jpg'; | ||
import coin from '../assets/coin.png'; | ||
import { FC } from 'react'; | ||
interface Order { | ||
id: string; | ||
status: string; | ||
location: string; | ||
number: number; | ||
fileName: string; | ||
pageNumber: number; | ||
coins: number; | ||
paid: string; | ||
} | ||
|
||
interface OrdersProps { | ||
orders: Order[]; | ||
} | ||
const Orders: FC<OrdersProps> = ({ orders }) => { | ||
const sliderRef = useRef(null); | ||
|
||
const scrollLeft = () => { | ||
sliderRef.current.scrollLeft -= 400; | ||
}; | ||
const scrollRight = () => { | ||
sliderRef.current.scrollLeft += 400; | ||
}; | ||
return ( | ||
<div className='relative'> | ||
<div className='flex justify-between items-center mb-4'> | ||
<h3 className='text-[#495057] text-xl lg:text-4xl'>Order in progress</h3> | ||
<div className='flex cursor-pointer opacity-40'> | ||
<span className='text-[#495057] text-sm lg:text-lg mr-[5px] font-semibold opacity-40 hover:opacity-100'> | ||
See more | ||
</span> | ||
<ArrowRightIcon className='w-3' /> | ||
</div> | ||
</div> | ||
<div className='flex gap-[8px] lg:gap-[24px] slider-container' ref={sliderRef}> | ||
{orders.map((order, index) => { | ||
return ( | ||
<div | ||
key={index} | ||
className='p-2 lg:p-4 bg-white grow shrink-0 flex flex-col rounded-lg border-[1px] shadow-[rgba(0, 0, 0, 0.05)] shadow-md' | ||
> | ||
<div className='text-xs flex justify-between mb-2 lg:mb-4'> | ||
<span className='font-semibold leading-[18px]'>{order.id}</span> | ||
<span | ||
className={ | ||
order.status === 'Progressing' | ||
? 'text-[#C27803]' | ||
: order.status === 'Ready' | ||
? 'text-[#0E9F6E]' | ||
: order.status === 'Done' | ||
? 'text-[#6875F5]' | ||
: 'text-[#F05252]' | ||
} | ||
> | ||
{order.status} | ||
</span> | ||
</div> | ||
<div className=''> | ||
<span className='text-[#1488D8] mr-1'>{order.fileName}</span> | ||
<span className='text-[#495057] opacity-40'>+{order.number}</span> | ||
</div> | ||
<div className='flex items-center mb-4'> | ||
<img src={location} width={20} height={20} className='mr-2' /> | ||
<span className='text-[#ACB5BD]'>{order.location}</span> | ||
</div> | ||
<hr className='h-[1px] mb-4' /> | ||
<div className='flex items-center justify-between'> | ||
<span className='text-[#495057] font-medium'>{order.pageNumber} pages</span> | ||
<div className='flex'> | ||
<img src={coin} width={20} /> | ||
<span className='mr-2'>{order.coins}</span> | ||
<span className='text-[#495057] opacity-40'>({order.paid})</span> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
})} | ||
<div className='prevButton hidden lg:block left-[-72px] opacity-60 hover:opacity-100 bg-white '> | ||
<ArrowLeftIcon className='w-4 text-[#1488D8]' onClick={scrollLeft} /> | ||
</div> | ||
<div className='nextButton hidden lg:block right-[-72px] opacity-60 hover:opacity-100 bg-white'> | ||
<ArrowRightIcon className='w-4 text-[#1488D8]' onClick={scrollRight} /> | ||
</div> | ||
</div> | ||
</div> | ||
); | ||
}; | ||
|
||
export default Orders; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,61 @@ | ||
import { useState } from 'react'; | ||
import { FC } from 'react'; | ||
import { ArrowLeftIcon, ArrowRightIcon } from '@heroicons/react/24/outline'; | ||
|
||
interface Slide { | ||
src: string; | ||
alt: string; | ||
} | ||
interface SlidesProps { | ||
children: Slide[]; | ||
} | ||
export const Slides: FC<SlidesProps> = ({ children }) => { | ||
const [slide, setSlide] = useState(0); | ||
const slideLength = children.length; | ||
const handleleftArrow = () => { | ||
const previousSlide = slide === 0 ? slideLength - 1 : slide - 1; | ||
setSlide(previousSlide); | ||
}; | ||
const handleRightArrow = () => { | ||
const nextSlide = slide === slideLength - 1 ? 0 : slide + 1; | ||
setSlide(nextSlide); | ||
}; | ||
setTimeout(handleRightArrow, 3000); | ||
return ( | ||
<div className='relative mb-4 w-full lg:mb-12'> | ||
<div className='absolute top-[40%] left-[5%] p-[5px] rounded-[999px] bg-white opacity-40 cursor-pointer hover:opacity-100'> | ||
<ArrowLeftIcon className='w-4' onClick={handleleftArrow} /> | ||
</div> | ||
{children.map((child, index) => { | ||
return ( | ||
<img | ||
src={child.src} | ||
alt={child.alt} | ||
key={index} | ||
className={ | ||
slide === index ? 'rounded-lg h-[200px] object-cover w-full lg:h-[400px]' : 'hidden' | ||
} | ||
/> | ||
); | ||
})} | ||
<div className='absolute top-[40%] right-[5%] p-[5px] rounded-[999px] bg-white opacity-40 cursor-pointer hover:opacity-100'> | ||
<ArrowRightIcon className='w-4 ' onClick={handleRightArrow} /> | ||
</div> | ||
<span className='flex absolute bottom-[1rem] left-[40%] lg:left-[50%]'> | ||
{children.map((_, idx) => { | ||
return ( | ||
<button | ||
key={idx} | ||
onClick={() => setSlide(idx)} | ||
className={ | ||
slide === idx | ||
? 'bg-white h-[0.5rem] w-[0.5rem] rounded-full border-0 outline-0 my-0 mx-[0.2rem] cursor-pointer' | ||
: 'h-[0.5rem] w-[0.5rem] rounded-full border-0 outline-0 my-0 mx-[0.2rem] cursor-pointer bg-[#9CA3AF]' | ||
} | ||
></button> | ||
); | ||
})} | ||
</span> | ||
</div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,5 +1,58 @@ | ||
// Tan's task in here | ||
import { Slides } from '../components/Slides'; | ||
import printerPicture from '../assets/printer.jpg'; | ||
import { ArrowRightIcon } from '@heroicons/react/24/outline'; | ||
import axios from 'axios'; | ||
import { useEffect, useState } from 'react'; | ||
import Orders from '../components/Orders'; | ||
|
||
export function HomePage() { | ||
return <div>Đăng nhập thành công</div>; | ||
const [orders, setOrders] = useState([]); | ||
useEffect(() => { | ||
const getOrders = async () => { | ||
try { | ||
const result = await axios.get('http://localhost:3002/orders'); | ||
setOrders(result.data); | ||
} catch (e) { | ||
console.log(e); | ||
} | ||
}; | ||
getOrders(); | ||
}, []); | ||
const slidePictures = [ | ||
{ | ||
src: 'https://e-learning.hcmut.edu.vn/theme/boost/images/slbktv.jpg?1695219022292', | ||
alt: 'slide1' | ||
}, | ||
{ | ||
src: 'https://e-learning.hcmut.edu.vn/theme/boost/images/slbk.jpg?1695219022805', | ||
alt: 'slide2' | ||
}, | ||
{ | ||
src: 'https://static.tuoitre.vn/tto/i/s626/2016/04/05/dai-hoc-bach-khoa-tp-hcm-cong-bo-phuong-an-tuyen-sinh-2015jpg-1459820200.jpg', | ||
alt: 'slide3' | ||
}, | ||
{ | ||
src: 'https://we25.vn/media2018/Img_News/2020/06/08/khuon-vien-dh-bach-khoa-tp-hcm-khien-dan-tinh-me-man-voi-nhung-hanh-cay-xanh-tham-toa-bong-mat-quanh-nam-14_20200608150159.jpg', | ||
alt: 'slide4' | ||
} | ||
]; | ||
return ( | ||
<div className='p-6 lg:py-5 lg:px-56'> | ||
<div className='mb-4 lg:mb-6'> | ||
<h4 className='text-[#1488D8] text-base lg:text-2xl'> | ||
Student Smart Printing Service (SSPS) | ||
</h4> | ||
<h3 className='text-[#030391] text-xl lg:text-4xl font-bold'>Welcome Username!</h3> | ||
</div> | ||
<Slides children={slidePictures} /> | ||
<div className='flex p-4 bg-[#1488D8] rounded-lg items-center mb-16 lg:mb-24 lg:h-[120px] lg:px-6 relative'> | ||
<div className='p-[10px] rounded-full bg-white mr-4'> | ||
<img src={printerPicture} /> | ||
</div> | ||
<span className='text-white font-bold lg:text-2xl'>Order printing</span> | ||
<ArrowRightIcon className='w-4 text-white absolute top-50 right-[24px] lg:w-6' /> | ||
</div> | ||
<Orders orders={orders} /> | ||
</div> | ||
); | ||
} |
Oops, something went wrong.