Hồng Phúc

32 bundles
1 file15 days ago
1

import React, { useState } from "react";

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291
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"; const Gallery: 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 [galleryClass, setGalleryClass] = useState([ { 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 [galleryBusiness, setGalleryBusiness] = useState([ { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-1.jpg", title: "KHÓA IOS PROGRAMMING ", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-2.jpg", title: "KHÓA IOS PROGRAMMING ", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-ios-bosch-3.jpg", title: "KHÓA ANDROID ", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/bosch/dao-tao-java-bosch-1.jpg", title: "KHÓA JAVA BACKEND (SPRING + HIBERNATE)", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/savista/dao-tao-savista-react-native.jpg", title: "KHÓA REACT NATIVE", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/dao-tao-doanh-nghiep/jabil/dao-tao-lap-trinh-csharp-doanh-nghiep.jpg", title: "KHÓA C# WINDOWS FORMS APPLICATION", }, ]); const [galleryWorkShop, setGalleryWorkShop] = useState([ { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/vaa/tai-tro-vaa-led-design-1.jpg", title: "ĐỒNG TÀI TRỢ, GIÁM KHẢO LED DESIGN VAA", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/vaa/tai-tro-vaa-led-design-6.jpg", title: "ĐỒNG TÀI TRỢ, GIÁM KHẢO LED DESIGN VAA", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/uit/seminar-iot-uit-1.jpg", title: "TỔ CHỨC HỘI THẢO INTERNET OF THINGS TẠI UIT ", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/uit/seminar-iot-uit-2.jpg", title: "TỔ CHỨC HỘI THẢO INTERNET OF THINGS TẠI UIT ", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-2.jpg", title: "TƯ VẤN NGHỀ ĐỒ HỌA, GAME TẠI ARENA MULTIMEDIA", }, { img: "https://www.stdio.vn/statics/external_data/files/training_stdio_vn/gallery/seminar-workshop/multimedia-arena/hoi-thao-nghe-arena-3.jpg", title: "TƯ VẤN NGHỀ ĐỒ HỌA, GAME TẠI ARENA MULTIMEDIA", }, ]); const navigation = [ { a: { href: "/training", as: "/training" }, text: "TIỂU BIỂU", }, { a: { href: "/gallery/hinh-anh-lop-hoc", as: "/gallery/hinh-anh-lop-hoc", }, text: "HÌNH ẢNH LỚP HỌC", }, { a: { href: "/gallery/dao-tao-doanh-nghiep", as: "/gallery/dao-tao-doanh-nghiep", }, text: "ĐẠO TẠO DOANH NGHIỆP", }, { a: { href: "/gallery/seminar-workshop", as: "/gallery/seminar-workshop" }, text: "SEMINAR & WORK", }, ]; 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>HÌNH ẢNH LỚP HỌC</h4> <Row gutter={[10, 10]}> {galleryClass.map((item, index) => { return ( <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}> <div className={styles.image} key={index}> <img src={item.img} /> <h5>{item.title}</h5> </div> </Col> ); })} </Row> </div> <div className={styles.category}> <h4>ĐÀO TẠO DOANH NGIỆP</h4> <Row gutter={[10, 10]}> {galleryBusiness.map((item, index) => { return ( <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}> <div className={styles.image} key={index}> <img src={item.img} /> <h5>{item.title}</h5> </div> </Col> ); })} </Row> </div> <div className={styles.category}> <h4>SEMINAR & WORKSHOP</h4> <Row gutter={[10, 10]}> {galleryWorkShop.map((item, index) => { return ( <Col xs={24} sm={12} md={12} lg={12} xl={8} xxl={8}> <div className={styles.image} key={index}> <img src={item.img} /> <h5>{item.title}</h5> </div> </Col> ); })} </Row> </div> </div> </div> </Col> </Row> </div> </div> </MainLayout> </React.Fragment> ); }; export default Gallery;