Hồng Phúc

32 bundles
1 file13 days ago
1

import React, { useState } from "react";

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588
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"; import _ from "lodash"; const GallerySlug: NextPage = () => { const [gallery, setGallery] = useState([ { img: "/static/shared/gallery/lop-hoc-3/lop-frontend-k5-2.jpg", }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k5-2.jpg", }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-1.jpg", }, { img: "/static/shared/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-2.jpg", }, // ]); const categories = [ { title: "HÌNH ẢNH LỚP HỌC", slug: "hinh-anh-lop-hoc", //là từ thằng category }, { title: "ĐÀO TẠO DOANH NGHIỆP", //là từ thằng category slug: "dao-tao-doanh-nghiep", }, { slug: "seminar-workshop", title: "SEMINAR-WORKSHOP", // là từ thằng category }, ]; const images = [ { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k9-1.jpg", title: "Lập trình C++ khóa 9", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k9-2.jpg", title: "Lập trình C++ khóa 9", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k11-1.jpg", title: "Lập trình C++ khóa 11", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k11-2.jpg", title: "Lập trình C++ khóa 12", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k12-1.jpg", title: "Lập trình C++ khóa 13", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k13-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: true, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k13-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k14-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k16-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k16-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k18-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-1/lop-cpp-k19-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-backend-k1-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k22-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k25-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k28-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k32-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k33-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k35-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-cpp-k36-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-directX-k1-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-frontend-k3-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-frontend-k3-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-2/lop-frontend-k3-3.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-cpp-k37-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-cpp-k37-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-cpp-k38-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-frontend-k5-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-frontend-k5-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k3-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k3-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k5-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k5-2.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-game-engine-k6-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-python-k1-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, { img: "/static/shared/gallery/lop-hoc-3/lop-python-k2-1.jpg", title: "Lập trình C++ khóa 19", category: "hinh-anh-lop-hoc", featured: false, }, //đào tạo doanh nghiệp { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-1.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-2.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-3.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-java-bosch-1.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-java-bosch-2.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-machine-learning.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: true, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/jabil/dao-tao-lap-trinh-csharp-doanh-nghiep.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: false, }, { img: "/static/shared/gallery/dao-tao-doanh-nghiep/savista/dao-tao-savista-react-native.jpg", title: "Lập trình C++ khóa 19", category: "dao-tao-doanh-nghiep", featured: false, }, //seminar-workshop { img: "/static/shared/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-1.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-2.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-3.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-3.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/ptit/seminar-technical-artists-ptit-1.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/ptit/seminar-technical-artists-ptit-2.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: true, }, { img: "/static/shared/gallery/seminar-workshop/ptit/seminar-technical-artists-ptit-3.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/uit/seminar-iot-uit-1.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/uit/seminar-iot-uit-2.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/uit/seminar-iot-uit-3.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/us/tu-van-nghe-nghiep-khtn-1.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/us/tu-van-nghe-nghiep-khtn-2.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/us/tu-van-nghe-nghiep-khtn-3.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/vaa/tai-tro-vaa-led-design-1.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/vaa/tai-tro-vaa-led-design-5.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, { img: "/static/shared/gallery/seminar-workshop/vaa/tai-tro-vaa-led-design-6.jpg", title: "Lập trình C++ khóa 19", category: "seminar-workshop", featured: false, }, ]; const route = useRouter(); //useRouter like NextJs console.log(route); const { gallerySlug } = route.query; //Check query means let filteredImages: any; let title: string; if (gallerySlug !== undefined) { filteredImages = images.filter((image) => gallerySlug === image.category); title = categories.filter((category) => gallerySlug === category.slug)[0] .title; } 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="/static/shared/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}> <Link href={`/gallery`} as={`/gallery`}> <a>Tiêu biểu</a> </Link> {categories.map((category, index) => { return ( <Link href={`/gallery/${category.slug}`} as={`/gallery/${category.slug}`} key={index} > <a>{category.title}</a> </Link> ); })} </div> <div className={styles.categories}> {gallerySlug !== undefined ? ( // nếu như "gallerySlug" khác undefined trả về "1" ngược lại trả về "2" và syntax code //1 <div className={styles.category}> <h4>{title}</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> ) : ( //2 <> {categories.map((category, index) => { return ( <div className={styles.category}> <h4 key={index}>{category.title}</h4> <Row gutter={[10, 10]}> {images.map((image: any, index: any) => { if (image.featured === false) return null; else { if (category.slug === image.category) // xét cái slug có bằng với cái category mà mình mong muốn 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;