11import { useEffect , useState } from "react" ;
22import { collection , getDocs } from "firebase/firestore" ;
33import { db } from "../../config/firebaseConfig" ;
4+ import { IoMdInformationCircleOutline } from "react-icons/io" ;
5+ import { homeData } from "../../data/home" ;
46
57interface Blog {
68 id : string ;
@@ -46,13 +48,23 @@ const Home = () => {
4648 }
4749
4850 return (
49- < div className = "flex flex-col p-[0em] md:p-[3em] gap-[2em]" >
51+ < div className = "flex flex-col p-[0em] md:p-[3em] gap-[2em] min-h-screen " >
5052 < div className = "flex flex-col items-center md:w-10" >
5153 < div className = "w-4 h-0.5 bc-green" > </ div >
52- < h1 > Latest </ h1 >
54+ < h1 > { homeData . title } </ h1 >
5355 </ div >
5456 { blogs . length === 0 ? (
55- < p className = "text-center text-lg font-medium" > There is no blog.</ p >
57+ < div className = "flex justify-center flex-col items-center mt-[16em]" >
58+ < p className = "text-center text-lg font-medium" >
59+ { homeData . NoBlogText }
60+ </ p >
61+ < div className = "flex items-center text-lg gap-0.5 c-green" >
62+ < IoMdInformationCircleOutline />
63+ < span className = "text-sm mb-[0.11em] c-white" >
64+ { homeData . VPNText }
65+ </ span >
66+ </ div >
67+ </ div >
5668 ) : (
5769 blogs . map ( ( blog ) => (
5870 < div key = { blog . id } className = "flex items-start md:h-[13rem] mb-4" >
@@ -66,7 +78,7 @@ const Home = () => {
6678 }
6779 ) }
6880 </ p >
69- < p className = "-rotate-90 absolute -left-6 bottom-5 text-xs w-36 text-center c-gray" >
81+ < p className = "-rotate-90 absolute -left-[2.05em] bottom-5 text-xs w-36 text-right c-gray" >
7082 { blog . author }
7183 </ p >
7284 </ div >
@@ -82,13 +94,11 @@ const Home = () => {
8294 {
8395 day : "numeric" ,
8496 month : "short" ,
85- year :"numeric"
97+ year : "numeric" ,
8698 }
8799 ) }
88100 </ p >
89- < p className = "text-center text-sm c-gray" >
90- { blog . author }
91- </ p >
101+ < p className = "text-center text-sm c-gray" > { blog . author } </ p >
92102 </ div >
93103 < div className = "flex flex-wrap gap-2" >
94104 { blog . tags . map ( ( tagItem , index ) => (
0 commit comments