Skip to content

V
vcci-news-frontend
Commit d3f49f7b authored by Phạm Quang Bảo's avatar Phạm Quang Bảo
Browse files
Options

add: branch 2

parent 4f284597
Show whitespace changes
Inline Side-by-side
Showing with 134 additions and 85 deletions
src/app/admin/base-config/page.tsx
View file @ d3f49f7b
...@@ -4,7 +4,6 @@ import { useState } from "react"; ...@@ -4,7 +4,6 @@ import { useState } from "react";
import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs"; import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { BrandingTab } from "./_components/BrandingTab"; import { BrandingTab } from "./_components/BrandingTab";
import { BannerTab } from "./_components/BannerTab"; import { BannerTab } from "./_components/BannerTab";
import { ContactTab } from "./_components/ContactTab";
import { SocialTab } from "./_components/SocialTab"; import { SocialTab } from "./_components/SocialTab";
export default function AdminBaseConfigPage() { export default function AdminBaseConfigPage() {
...@@ -27,12 +26,6 @@ export default function AdminBaseConfigPage() { ...@@ -27,12 +26,6 @@ export default function AdminBaseConfigPage() {
> >
Banner trang chủ Banner trang chủ
</TabsTrigger> </TabsTrigger>
<TabsTrigger
value="contact"
className="rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-600 hover:text-[#063e8e] data-[state=active]:bg-white data-[state=active]:text-[#063e8e]"
>
Thông tin liên hệ
</TabsTrigger>
<TabsTrigger <TabsTrigger
value="social" value="social"
className="rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-600 hover:text-[#063e8e] data-[state=active]:bg-white data-[state=active]:text-[#063e8e]" className="rounded-xl px-4 py-2.5 text-sm font-semibold text-slate-600 hover:text-[#063e8e] data-[state=active]:bg-white data-[state=active]:text-[#063e8e]"
...@@ -42,10 +35,9 @@ export default function AdminBaseConfigPage() { ...@@ -42,10 +35,9 @@ export default function AdminBaseConfigPage() {
</TabsList> </TabsList>
</div> </div>
<div className="space-y-5"> <div className="space-y-5">
<BrandingTab /> {activeTab === "branding" && <BrandingTab />}
<BannerTab /> {activeTab === "banner" && <BannerTab />}
<ContactTab /> {activeTab === "social" && <SocialTab />}
<SocialTab />
</div> </div>
</Tabs> </Tabs>
</div> </div>
......
src/components/layout/main/footer.tsx
View file @ d3f49f7b
"use client"; "use client";
import React, { useState } from "react"; import React, { useState } from "react";
import { import {
...@@ -12,6 +12,7 @@ import { ...@@ -12,6 +12,7 @@ import {
Twitter, Twitter,
Youtube, Youtube,
} from "lucide-react"; } from "lucide-react";
import Image from "next/image";
import Link from "next/link"; import Link from "next/link";
import { useQuery } from "@tanstack/react-query"; import { useQuery } from "@tanstack/react-query";
import { postApiV10NewsletterSubscription } from "@/api/vcci-news/endpoints/newsletter-subscription"; import { postApiV10NewsletterSubscription } from "@/api/vcci-news/endpoints/newsletter-subscription";
...@@ -32,6 +33,22 @@ type SocialItem = { ...@@ -32,6 +33,22 @@ type SocialItem = {
icon: React.ReactNode; icon: React.ReactNode;
}; };
type FooterBranchLink = {
label: string;
url: string;
};
type FooterBranch = {
branch_name: string;
address: string;
telephone?: string;
fax?: string;
email?: string;
zalo?: FooterBranchLink;
facebook?: FooterBranchLink;
qr_image?: string;
};
const fallbackSocials: SocialItem[] = [ const fallbackSocials: SocialItem[] = [
{ {
key: "facebook", key: "facebook",
...@@ -100,35 +117,31 @@ function Footer() { ...@@ -100,35 +117,31 @@ function Footer() {
const siteInformation = getEnvelopeData<SiteInformationData>( const siteInformation = getEnvelopeData<SiteInformationData>(
siteInformationResponse, siteInformationResponse,
); );
const primaryBranch = const footerBranches: FooterBranch[] = [
siteInformation?.branches?.find((branch) => branch?.is_active) ?? {
siteInformation?.branches?.[0] ?? branch_name:
null;
const branches = (siteInformation?.branches ?? [])
.filter((branch) => branch?.is_active ?? true)
.sort((left, right) => (left.sort_order ?? 0) - (right.sort_order ?? 0));
const extraBranches = branches.filter(
(branch) => branch?.id && branch?.id !== primaryBranch?.id,
);
const contactInfo = {
name:
primaryBranch?.branch_name ??
siteInformation?.website_name ??
"LIÊN ĐOÀN THƯƠNG MẠI & CÔNG NGHIỆP VIỆT NAM - CHI NHÁNH KHU VỰC THÀNH PHỐ HỒ CHÍ MINH", "LIÊN ĐOÀN THƯƠNG MẠI & CÔNG NGHIỆP VIỆT NAM - CHI NHÁNH KHU VỰC THÀNH PHỐ HỒ CHÍ MINH",
address: address: "Số 171 Võ Thị Sáu, Phường Xuân Hoà, TP. Hồ Chí Minh",
siteInformation?.address ?? telephone: "+84 28 3932 6598",
primaryBranch?.address ?? fax: "+84 28 3932 5472",
"171 Võ Thị Sáu, Phường Xuân Hòa, TP. HCM", email: "info@vcci-hcm.org.vn",
telephone: },
siteInformation?.telephone ?? {
primaryBranch?.telephone ?? branch_name: "Cơ sở 2",
primaryBranch?.hotline ?? address: "Số 155 Nguyễn Thái Học, Phường Tam Thắng, TP. Hồ Chí Minh",
"+84 28 3932 6598", telephone: "+84 254 3852 710",
fax: primaryBranch?.fax ?? "+84 28 3932 5472", email: "vccihcm.cs2@gmail.com",
email: zalo: {
siteInformation?.email ?? primaryBranch?.email ?? "info@vcci-hcm.org.vn", label: "VCCI HCM CS2",
}; url: "https://zalo.me/vccivungtau",
},
facebook: {
label: "Liên đoàn Thương mại và Công nghiệp Việt Nam, Chi nhánh KV TP.HCM, Cơ sở 2",
url: "https://www.facebook.com/vccivt",
},
qr_image: "/qr-footer/qr-zl.jpg",
},
];
const socialLinks = (() => { const socialLinks = (() => {
const socials = const socials =
...@@ -213,7 +226,7 @@ function Footer() { ...@@ -213,7 +226,7 @@ function Footer() {
<input <input
value={email} value={email}
onChange={(event) => setEmail(event.target.value)} onChange={(event) => setEmail(event.target.value)}
className="h-12 flex-1 rounded-[4px] border border-[#31458d] bg-[#29418f] px-4 text-[15px] text-white placeholder:text-[#84a1ef] outline-hidden" className="h-12 flex-1 rounded-[4px] border border-[#31458d] bg-[#29418f] px-4 text-[14px] text-white placeholder:text-[#84a1ef] outline-hidden"
type="email" type="email"
placeholder="Nhập email của bạn" placeholder="Nhập email của bạn"
/> />
...@@ -241,7 +254,7 @@ function Footer() { ...@@ -241,7 +254,7 @@ function Footer() {
className="h-4 w-4 rounded border-white/30 bg-transparent accent-[#f7b500]" className="h-4 w-4 rounded border-white/30 bg-transparent accent-[#f7b500]"
/> />
<label <label
className="text-[13px] text-[#86b8ff]" className="text-[14px] text-[#86b8ff]"
htmlFor="footer-check" htmlFor="footer-check"
> >
Đồng ý với Điều khoản nhận email Đồng ý với Điều khoản nhận email
...@@ -256,7 +269,7 @@ function Footer() { ...@@ -256,7 +269,7 @@ function Footer() {
{message ? ( {message ? (
<div <div
className={`mt-3 flex items-center gap-2 rounded-[6px] px-4 py-3 text-[13px] font-medium ${messageType === "success" className={`mt-3 flex items-center gap-2 rounded-[6px] px-4 py-3 text-[14px] font-medium ${messageType === "success"
? "bg-[#1a8754] text-white" ? "bg-[#1a8754] text-white"
: "bg-[#c0392b] text-white" : "bg-[#c0392b] text-white"
}`} }`}
...@@ -275,50 +288,94 @@ function Footer() { ...@@ -275,50 +288,94 @@ function Footer() {
<div className="mt-2.5 h-[4px] w-[48px] rounded-full bg-[#f7b500]" /> <div className="mt-2.5 h-[4px] w-[48px] rounded-full bg-[#f7b500]" />
<div className="mt-5 space-y-4"> <div className="mt-5 space-y-4">
<p className="max-w-[420px] text-[16px] font-semibold leading-[1.5] text-[#dce7ff]"> {footerBranches.map((branch) => (
{contactInfo.name} <div key={branch.branch_name} className="space-y-2">
{branch.branch_name ? (
<p className="font-semibold text-[#dce7ff]">
{branch.branch_name}
</p> </p>
) : null}
<div className="space-y-2.5 text-[15px] text-[#c7d8ff]"> {branch.address ? (
<div className="flex items-start gap-3"> <div className="flex items-start gap-2">
<MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[#f7b500]" /> <MapPin className="mt-0.5 h-4 w-4 shrink-0 text-[#f7b500]" />
<span>{contactInfo.address}</span> <span className="text-[14px] leading-[1.5] text-[#c7d8ff]">
{branch.address}
</span>
</div> </div>
<div className="flex items-center gap-3"> ) : null}
{branch.telephone ? (
<div className="flex items-center gap-2">
<Phone className="h-4 w-4 shrink-0 text-[#f7b500]" /> <Phone className="h-4 w-4 shrink-0 text-[#f7b500]" />
<span>{contactInfo.telephone}</span> <span className="text-[14px] leading-[1.5] text-[#c7d8ff]">
{branch.telephone}
</span>
</div> </div>
<div className="flex items-center gap-3"> ) : null}
{branch.fax ? (
<div className="flex items-center gap-2">
<Phone className="h-4 w-4 shrink-0 text-[#f7b500]" /> <Phone className="h-4 w-4 shrink-0 text-[#f7b500]" />
<span>{contactInfo.fax}</span> <span className="text-[14px] leading-[1.5] text-[#c7d8ff]">
{branch.fax}
</span>
</div> </div>
<div className="flex items-center gap-3"> ) : null}
{branch.email ? (
<div className="flex items-center gap-2">
<Mail className="h-4 w-4 shrink-0 text-[#f7b500]" /> <Mail className="h-4 w-4 shrink-0 text-[#f7b500]" />
<a href={`mailto:${contactInfo.email}`}> <a
{contactInfo.email} href={`mailto:${branch.email}`}
className="text-[14px] leading-[1.5] text-[#86b8ff] hover:text-white"
>
{branch.email}
</a> </a>
</div> </div>
) : null}
{branch.zalo ? (
<div className="flex items-start gap-2">
<span className="text-[14px] leading-[1.5] text-[#c7d8ff]">
Zalo OA:{" "}
<a
href={branch.zalo.url}
target="_blank"
rel="noreferrer"
className="text-[#86b8ff] hover:text-white"
>
{branch.zalo.label}
</a>
</span>
</div> </div>
{extraBranches.length > 0 ? (
<div className="pt-4">
<p className="text-[14px] font-semibold uppercase text-[#dce7ff]">
Các chi nhánh khác
</p>
<div className="mt-3 space-y-3 text-[14px] text-[#c7d8ff]">
{extraBranches.map((branch) => (
<div key={branch.id} className="space-y-1">
{branch.branch_name ? (
<p className="font-semibold text-[#dce7ff]">
{branch.branch_name}
</p>
) : null} ) : null}
{branch.facebook ? (
<div className="flex items-start gap-2">
<span className="text-[14px] leading-[1.5] text-[#c7d8ff]">
Facebook:{" "}
<a
href={branch.facebook.url}
target="_blank"
rel="noreferrer"
className="text-[#86b8ff] hover:text-white"
>
{branch.facebook.label}
</a>
</span>
</div> </div>
))} ) : null}
{branch.qr_image ? (
<div className="flex items-start gap-2">
<div className="relative h-28 w-28 overflow-hidden rounded-md bg-white p-1">
<Image
src={branch.qr_image}
alt={`Mã QR Zalo ${branch.branch_name}`}
fill
sizes="112px"
className="object-contain"
/>
</div> </div>
</div> </div>
) : null} ) : null}
</div> </div>
))}
</div>
</div> </div>
<div> <div>
...@@ -339,7 +396,7 @@ function Footer() { ...@@ -339,7 +396,7 @@ function Footer() {
))} ))}
</div> </div>
<div className="mt-5 space-y-2 text-[15px] text-[#c7d8ff]"> <div className="mt-5 space-y-2 text-[14px] text-[#c7d8ff]">
{quickLinks.map((item) => ( {quickLinks.map((item) => (
<Link <Link
key={item.href} key={item.href}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment