47 lines
1.4 KiB
JavaScript
47 lines
1.4 KiB
JavaScript
import React, { useEffect, useState } from "react";
|
|
import axios from "axios";
|
|
|
|
export default function SocialLinks() {
|
|
const [data, setData] = useState(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [error, setError] = useState(null);
|
|
|
|
useEffect(() => {
|
|
async function fetchData() {
|
|
try {
|
|
setLoading(true);
|
|
const res = await axios.get("/api/get-component-data", {
|
|
params: { component_name: "SocialLinks" },
|
|
});
|
|
setData(res.data.data);
|
|
} catch (err) {
|
|
setError("获取SocialLinks数据失败");
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
fetchData();
|
|
}, []);
|
|
|
|
if (loading) return null;
|
|
if (error) return null;
|
|
if (!data || !Array.isArray(data.items) || !data.items.length) return null;
|
|
|
|
return (
|
|
<nav className="nav social">
|
|
{data.items.map((elm, i) => (
|
|
<a
|
|
key={i}
|
|
className={`!text-[${elm.item_color||'#cacaca'}] text-[1rem] transition-all duration-[0.2s] ease-in-out translate-y-0 motion-reduce:transition-none hover:translate-y-[-0.15rem] m-[0_.7rem_0_0]`}
|
|
href={elm.item_link}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
>
|
|
<i
|
|
className={`uil ${elm.item_subtitle||''} before:content-[${elm.item_description||''}] !text-[${elm.item_color||'#cacaca'}] text-[1rem]`}
|
|
/>
|
|
</a>
|
|
))}
|
|
</nav>
|
|
);
|
|
} |