Home.tsx (4344B)
1 import { Header } from "../components/header"; 2 import { Post } from "../components/post"; 3 import { Plock } from "react-plock"; 4 import { UserData } from "../data/user"; 5 import { PostData } from "../data/post"; 6 import { useTranslation } from "react-i18next"; 7 8 9 const BREAKPOINTS = [ 10 { size: 500, columns: 1 }, 11 { size: 800, columns: 2 }, 12 { size: 1400, columns: 3 }, 13 { size: 1401, columns: 4 }, 14 ]; 15 16 export function Home() { 17 const { t } = useTranslation(); 18 19 return ( 20 <div className="flex flex-col"> 21 <header> 22 <Header /> 23 </header> 24 <main className="m-12 mt-6"> 25 <h1 className="text-3xl font-bold mb-4 text-white">{t('Explore')}</h1> 26 <div className="flex justify-center" id="gallery"> 27 <Plock gap={"24px"} breakpoints={BREAKPOINTS}> 28 {/* 29 // @ts-ignore */} 30 <Post user={new UserData("a", "Person A", "https://images.unsplash.com/photo-1519699047748-de8e457a634e?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3NzYyNA&ixlib=rb-4.0.3&q=80&w=922")} post={new PostData("a", { file: { url: "https://images.unsplash.com/photo-1648773009733-1eab564f3330?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzk0MA&ixlib=rb-4.0.3&q=80&w=614" } })} /> 31 {/* 32 // @ts-ignore */} 33 <Post user={new UserData("b", "Person B", "https://images.unsplash.com/photo-1485893086445-ed75865251e0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3Nzc2Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("b", { file: { url: "https://images.unsplash.com/photo-1648775933902-f633de370964?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODE1OQ&ixlib=rb-4.0.3&q=80&w=1383" } })} /> 34 {/* 35 // @ts-ignore */} 36 <Post user={new UserData("c", "Person C", "https://images.unsplash.com/photo-1584997159889-8bb96d0a2217?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODAxNw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("c", { file: { url: "https://images.unsplash.com/photo-1648793633175-f3635585014b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODIwNA&ixlib=rb-4.0.3&q=80&w=614" } })} /> 37 {/* 38 // @ts-ignore */} 39 <Post user={new UserData("d", "Person D", "https://images.unsplash.com/photo-1543123820-ac4a5f77da38?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA0Ng&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("d", { file: { url: "https://images.unsplash.com/photo-1648775170273-dcbe48fb12a0?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI1Ng&ixlib=rb-4.0.3&q=80&w=1229" } })} /> 40 {/* 41 // @ts-ignore */} 42 <Post user={new UserData("e", "Person E", "https://images.unsplash.com/photo-1595687825617-10c4d36566e7?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA3Mw&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("e", { file: { url: "https://images.unsplash.com/photo-1648769244858-6e20b5999a6b?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=922&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODI5Nw&ixlib=rb-4.0.3&q=80&w=651" } })} /> 43 {/* 44 // @ts-ignore */} 45 <Post user={new UserData("f", "Person E", "https://images.unsplash.com/photo-1609010586352-ce4e725aa565?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=80&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODA5Mg&ixlib=rb-4.0.3&q=80&w=80")} post={new PostData("f", { file: { url: "https://images.unsplash.com/photo-1648750690732-f6eb85984ff8?crop=entropy&cs=tinysrgb&fit=crop&fm=jpg&h=921&ixid=MnwxfDB8MXxyYW5kb218MHx8fHx8fHx8MTY3Mjc3ODM1NQ&ixlib=rb-4.0.3&q=80&w=614" } })} /> 46 </Plock> 47 </div> 48 </main> 49 </div> 50 ); 51 }