Hồng Phúc

32 bundles
1 file15 days ago
1

[gallerySlug]

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222
import React, { useState } from "react"; import { NextPage } from "next"; import Link from "next/link"; import { Tag, Card, Button, Row, Col, Form } from "antd"; import { ClockCircleOutlined, TeamOutlined, CheckCircleOutlined, AppstoreOutlined, } from "@ant-design/icons"; import MainLayout from "../../layout/MainLayout"; import { useTranslation } from "../../../i18n"; import { SITE_URL } from "../../config"; import Head from "../../components/forms/Head"; import styles from "./[gallerySlug].less"; import { useRouter } from "next/router"; const GallerySlug: NextPage = () => { const [gallery, setGallery] = useState([ { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-3/lop-frontend-k5-2.jpg", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-3/lop-game-engine-k5-2.jpg", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-1.jpg", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-2.jpg", }, // ]); const categories = [ { title: "hinh-anh-lop-hoc", slug: "", // là từ thằng category }, { title: "dao-tao-doanh-nghiep", slug: "", // là từ thằng category }, { title: "seminar-workshop", slug: "", // là từ thằng category }, ]; const images = [ { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k9-1.jpg", title: "Lập trình C++ khóa 9", category: "", featured: true, }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k9-2.jpg", title: "Lập trình C++ khóa 9", category: "", featured: true, }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k11-1.jpg", title: "Lập trình C++ khóa 11", category: "", featured: true, }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k12-1.jpg", title: "Lập trình C++ khóa 12", category: "", featured: true, }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k13-1.jpg", title: "Lập trình C++ khóa 13", featured: true, }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k19-1.jpg", title: "Lập trình C++ khóa 19", featured: true, }, ]; const navigation = [ { a: { href: "/gallery", as: "/gallery" }, text: "TIÊU BIỂU", }, { a: { href: "/gallery/[gallerySlug]", as: "/gallery/hinh-anh-lop-hoc", }, text: "HÌNH ẢNH LỚP HỌC", }, { a: { href: "/gallery/[gallerySlug]", as: "/gallery/dao-tao-doanh-nghiep", }, text: "ĐẠO TẠO DOANH NGHIỆP", }, { a: { href: "/gallery/[gallerySlug]", as: "/gallery/seminar-workshop" }, text: "SEMINAR & WORK", }, ]; const route = useRouter(); console.log(route); const { gallerySlug } = route.query; let filteredImages: any; if (gallerySlug !== undefined) { filteredImages = images.filter((image, index) => { console.log(gallerySlug, image.category); return gallerySlug === image.category; }); } else { console.log("sssss"); } return ( <React.Fragment> <Head title="STDIO Training" image={SITE_URL + "/static/shared/fb-img.png"} url={SITE_URL + "/"} /> <MainLayout> <div className={styles.gallery}> <div className={styles.galleryBox}> <Row gutter={[30, 30]}> <Col xs={24} sm={24} md={10} lg={10} xl={8} xxl={8}> <div className={styles.featuredCol}> <div className={styles.content}> <h1>Thư Viện Ảnh</h1> <p> Thư viện hình ảnh của STDIO Training trong các hoạt động nghiên cứu, đào tạo. </p> </div> <div className={styles.featuredImage}> <img src="https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/lop-hoc-1/lop-cpp-k14-1.jpg" /> </div> <div className={styles.topImage}> {gallery.map((item, index) => { return <img src={item.img} key={index} />; })} </div> </div> </Col> <Col xs={24} sm={24} md={14} lg={14} xl={16} xxl={16}> <div className={styles.galleryCol}> <div className={styles.nav}> {navigation.map((item, index) => { return ( <Link href={item.a.href} as={item.a.as} key={index}> <a>{item.text}</a> </Link> ); })} </div> <div className={styles.categories}> <div className={styles.category}> <h4></h4> <Row gutter={[10, 10]}> {filteredImages.map((image: any, index: number) => { return ( <Col key={index} xs={24} sm={12} md={12} lg={12} xl={8} xxl={8} > <div className={styles.image} key={index}> <img src={image.img} /> <h5>{image.title}</h5> </div> </Col> ); })} </Row> </div> </div> </div> </Col> </Row> </div> </div> </MainLayout> </React.Fragment> ); }; export default GallerySlug;