|
1 | | -'use client' |
2 | | -import React, { useState, useEffect } from 'react' |
3 | | -import styles from './adminrecentpost.module.css' |
4 | | -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' |
5 | | -import { faBarChart, faClock, faComment, faEye, faGear, faPencil, faShare } from '@fortawesome/free-solid-svg-icons' |
| 1 | +"use client"; |
| 2 | +import React, { useState, useEffect } from "react"; |
| 3 | +import styles from "./adminrecentpost.module.css"; |
| 4 | +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; |
| 5 | +import { |
| 6 | + faBarChart, |
| 7 | + faClock, |
| 8 | + faComment, |
| 9 | + faEye, |
| 10 | + faGear, |
| 11 | + faPencil, |
| 12 | + faShare, |
| 13 | +} from "@fortawesome/free-solid-svg-icons"; |
| 14 | +import BASE_PATH from "../../../base"; |
6 | 15 |
|
7 | 16 | const AdminRecentPosts = () => { |
8 | | - |
9 | 17 | const sliderData = [ |
10 | 18 | { |
11 | | - img: '/style.png', |
12 | | - title: '20 Best Travel Tips After 5 Years Of Traveling The World', |
13 | | - views: '12K Views', |
14 | | - shares: '234 Shares', |
15 | | - comments: '44 Comments', |
16 | | - released: 'Released 3d ago', |
| 19 | + img: "/style.png", |
| 20 | + title: "20 Best Travel Tips After 5 Years Of Traveling The World", |
| 21 | + views: "12K Views", |
| 22 | + shares: "234 Shares", |
| 23 | + comments: "44 Comments", |
| 24 | + released: "Released 3d ago", |
17 | 25 | }, |
18 | 26 | { |
19 | | - img: '/coding.png', |
20 | | - title: 'Top 10 Programming Tips for Beginners', |
21 | | - views: '15K Views', |
22 | | - shares: '300 Shares', |
23 | | - comments: '60 Comments', |
24 | | - released: 'Released 2d ago', |
| 27 | + img: "/coding.png", |
| 28 | + title: "Top 10 Programming Tips for Beginners", |
| 29 | + views: "15K Views", |
| 30 | + shares: "300 Shares", |
| 31 | + comments: "60 Comments", |
| 32 | + released: "Released 2d ago", |
25 | 33 | }, |
26 | 34 | { |
27 | | - img: '/food.png', |
28 | | - title: 'Best Recipes for Home-Cooked Meals in 2024', |
29 | | - views: '18K Views', |
30 | | - shares: '500 Shares', |
31 | | - comments: '120 Comments', |
32 | | - released: 'Released 5d ago', |
| 35 | + img: "/food.png", |
| 36 | + title: "Best Recipes for Home-Cooked Meals in 2024", |
| 37 | + views: "18K Views", |
| 38 | + shares: "500 Shares", |
| 39 | + comments: "120 Comments", |
| 40 | + released: "Released 5d ago", |
33 | 41 | }, |
34 | 42 | { |
35 | | - img: '/fashion.png', |
36 | | - title: 'Fashion Trends to Watch in 2024', |
37 | | - views: '9K Views', |
38 | | - shares: '150 Shares', |
39 | | - comments: '30 Comments', |
40 | | - released: 'Released 1w ago', |
| 43 | + img: "/fashion.png", |
| 44 | + title: "Fashion Trends to Watch in 2024", |
| 45 | + views: "9K Views", |
| 46 | + shares: "150 Shares", |
| 47 | + comments: "30 Comments", |
| 48 | + released: "Released 1w ago", |
41 | 49 | }, |
42 | 50 | { |
43 | | - img: '/travel.png', |
44 | | - title: 'Hidden Travel Gems Around the World You Must Visit', |
45 | | - views: '20K Views', |
46 | | - shares: '450 Shares', |
47 | | - comments: '80 Comments', |
48 | | - released: 'Released 1d ago', |
| 51 | + img: "/travel.png", |
| 52 | + title: "Hidden Travel Gems Around the World You Must Visit", |
| 53 | + views: "20K Views", |
| 54 | + shares: "450 Shares", |
| 55 | + comments: "80 Comments", |
| 56 | + released: "Released 1d ago", |
49 | 57 | }, |
50 | 58 | { |
51 | | - img: '/culture.png', |
52 | | - title: 'Understanding Global Cultures: A Guide for 2024', |
53 | | - views: '22K Views', |
54 | | - shares: '600 Shares', |
55 | | - comments: '140 Comments', |
56 | | - released: 'Released 3h ago', |
57 | | - } |
| 59 | + img: "/culture.png", |
| 60 | + title: "Understanding Global Cultures: A Guide for 2024", |
| 61 | + views: "22K Views", |
| 62 | + shares: "600 Shares", |
| 63 | + comments: "140 Comments", |
| 64 | + released: "Released 3h ago", |
| 65 | + }, |
58 | 66 | ]; |
59 | | - |
60 | | - |
61 | 67 |
|
62 | 68 | const [currentSlide, setCurrentSlide] = useState(0); |
63 | 69 | const totalSlides = sliderData.length; |
64 | 70 |
|
65 | 71 | useEffect(() => { |
66 | 72 | const interval = setInterval(() => { |
67 | 73 | setCurrentSlide((prevSlide) => (prevSlide + 1) % totalSlides); |
68 | | - if (currentSlide === totalSlides-1){ |
69 | | - sliderData.push(sliderData.shift()) |
| 74 | + if (currentSlide === totalSlides - 1) { |
| 75 | + sliderData.push(sliderData.shift()); |
70 | 76 | } |
71 | | - }, 5000); |
| 77 | + }, 5000); |
72 | 78 |
|
73 | | - return () => clearInterval(interval); |
| 79 | + return () => clearInterval(interval); |
74 | 80 | }, [totalSlides]); |
75 | 81 |
|
76 | | - |
77 | | - |
78 | 82 | return ( |
79 | 83 | <div className={styles.container}> |
80 | 84 | <div |
81 | 85 | className={styles.sliderItems} |
82 | 86 | style={{ transform: `translateX(-${currentSlide * 100}%)` }} |
83 | 87 | > |
84 | | - |
85 | | - {sliderData.map((item, i) => ( |
86 | | - <div className={styles.sliderItem} key={i} style={{ '--img': `url(${item.img})` }}> |
87 | | - <div className={styles.top}> |
88 | | - <div className={styles.itemsContainer}> |
89 | | - <div className={styles.button}> |
90 | | - <FontAwesomeIcon icon={faPencil}/> |
91 | | - </div> |
92 | | - <div className={styles.button}> |
93 | | - <FontAwesomeIcon icon={faGear}/> |
94 | | - </div> |
95 | | - <div className={styles.button}> |
96 | | - <FontAwesomeIcon icon={faBarChart}/> |
97 | | - </div> |
| 88 | + {sliderData.map((item, i) => ( |
| 89 | + <div |
| 90 | + className={styles.sliderItem} |
| 91 | + key={i} |
| 92 | + style={{ "--img": `url(${BASE_PATH}${item.img})` }} |
| 93 | + > |
| 94 | + <div className={styles.top}> |
| 95 | + <div className={styles.itemsContainer}> |
| 96 | + <div className={styles.button}> |
| 97 | + <FontAwesomeIcon icon={faPencil} /> |
| 98 | + </div> |
| 99 | + <div className={styles.button}> |
| 100 | + <FontAwesomeIcon icon={faGear} /> |
| 101 | + </div> |
| 102 | + <div className={styles.button}> |
| 103 | + <FontAwesomeIcon icon={faBarChart} /> |
98 | 104 | </div> |
99 | 105 | </div> |
| 106 | + </div> |
100 | 107 |
|
101 | | - <div className={styles.textContainer}> |
102 | | - <p>LATEST POSTS</p> |
103 | | - <h4>{item.title}</h4> |
104 | | - <div className={styles.stats}> |
105 | | - <div className={styles.stat}> |
106 | | - <FontAwesomeIcon className={styles.icon} icon={faEye}/> |
107 | | - <p>{item.views}</p> |
108 | | - </div> |
109 | | - <div className={styles.stat}> |
110 | | - <FontAwesomeIcon className={styles.icon} icon={faShare}/> |
111 | | - <p>{item.shares}</p> |
112 | | - </div> |
113 | | - <div className={styles.stat}> |
114 | | - <FontAwesomeIcon className={styles.icon} icon={faComment}/> |
115 | | - <p>{item.comments}</p> |
116 | | - </div> |
117 | | - <div className={styles.stat}> |
118 | | - <FontAwesomeIcon className={styles.icon} icon={faClock}/> |
119 | | - <p>{item.released}</p> |
120 | | - </div> |
| 108 | + <div className={styles.textContainer}> |
| 109 | + <p>LATEST POSTS</p> |
| 110 | + <h4>{item.title}</h4> |
| 111 | + <div className={styles.stats}> |
| 112 | + <div className={styles.stat}> |
| 113 | + <FontAwesomeIcon className={styles.icon} icon={faEye} /> |
| 114 | + <p>{item.views}</p> |
| 115 | + </div> |
| 116 | + <div className={styles.stat}> |
| 117 | + <FontAwesomeIcon className={styles.icon} icon={faShare} /> |
| 118 | + <p>{item.shares}</p> |
| 119 | + </div> |
| 120 | + <div className={styles.stat}> |
| 121 | + <FontAwesomeIcon className={styles.icon} icon={faComment} /> |
| 122 | + <p>{item.comments}</p> |
| 123 | + </div> |
| 124 | + <div className={styles.stat}> |
| 125 | + <FontAwesomeIcon className={styles.icon} icon={faClock} /> |
| 126 | + <p>{item.released}</p> |
121 | 127 | </div> |
122 | 128 | </div> |
123 | 129 | </div> |
124 | | - ))} |
| 130 | + </div> |
| 131 | + ))} |
125 | 132 | </div> |
126 | | - |
127 | | - |
128 | | - |
| 133 | + |
129 | 134 | <div className={styles.dashes}> |
130 | | - {sliderData.map((_, i) => ( |
131 | | - <div |
132 | | - key={i} |
133 | | - className={`${styles.dash} ${currentSlide === i ? styles.active : ''}`} |
134 | | - onClick={() => setCurrentSlide(i)} |
135 | | - /> |
136 | | - ))} |
| 135 | + {sliderData.map((_, i) => ( |
| 136 | + <div |
| 137 | + key={i} |
| 138 | + className={`${styles.dash} ${ |
| 139 | + currentSlide === i ? styles.active : "" |
| 140 | + }`} |
| 141 | + onClick={() => setCurrentSlide(i)} |
| 142 | + /> |
| 143 | + ))} |
137 | 144 | </div> |
138 | | - |
139 | 145 | </div> |
140 | | - ) |
141 | | -} |
| 146 | + ); |
| 147 | +}; |
142 | 148 |
|
143 | | -export default AdminRecentPosts |
| 149 | +export default AdminRecentPosts; |
0 commit comments