remi/Perplexica
1
0
Fork 0
mirror of https://github.com/ItzCrazyKns/Perplexica.git synced 2025-10-14 11:38:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(widgets): update theme

Browse Source
This commit is contained in:
ItzCrazyKns
2025-09-25 18:56:51 +05:30
parent 7337f3423d
commit b1426e8638
2 changed files with 76 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/NewsArticleWidget.tsx
View File

@@ -27,7 +27,7 @@ const NewsArticleWidget = () => {
}, []); }, []);
return ( return (
<div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3 overflow-hidden"> <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-stretch w-full h-24 min-h-[96px] max-h-[96px] p-0 overflow-hidden">
{loading ? ( {loading ? (
<> <>
<div className="animate-pulse flex flex-row items-center w-full h-full"> <div className="animate-pulse flex flex-row items-center w-full h-full">
@@ -43,10 +43,11 @@ const NewsArticleWidget = () => {
) : article ? ( ) : article ? (
<a <a
href={`/?q=Summary: ${article.url}`} href={`/?q=Summary: ${article.url}`}
className="flex flex-row items-center w-full h-full group" className="flex flex-row items-stretch w-full h-full relative overflow-hidden group"
> >
<div className="relative w-24 min-w-24 max-w-24 h-full overflow-hidden">
<img <img
className="object-cover rounded-lg w-16 min-w-16 max-w-16 h-16 min-h-16 max-h-16 border border-light-200 dark:border-dark-200 bg-light-200 dark:bg-dark-200 group-hover:opacity-90 transition" className="object-cover w-full h-full bg-light-200 dark:bg-dark-200 group-hover:scale-110 transition-transform duration-300"
src={ src={
new URL(article.thumbnail).origin + new URL(article.thumbnail).origin +
new URL(article.thumbnail).pathname + new URL(article.thumbnail).pathname +
@@ -54,11 +55,12 @@ const NewsArticleWidget = () => {
} }
alt={article.title} alt={article.title}
/> />
<div className="flex flex-col justify-center flex-1 h-full pl-3 w-0"> </div>
<div className="font-bold text-xs text-black dark:text-white leading-tight truncate overflow-hidden whitespace-nowrap"> <div className="flex flex-col justify-center flex-1 px-3 py-2">
<div className="font-semibold text-xs text-black dark:text-white leading-tight line-clamp-2 mb-1">
{article.title} {article.title}
</div> </div>
<p className="text-black/70 dark:text-white/70 text-xs leading-snug truncate overflow-hidden whitespace-nowrap"> <p className="text-black/60 dark:text-white/60 text-[10px] leading-relaxed line-clamp-2">
{article.content} {article.content}
</p> </p>
</div> </div>

26
src/components/WeatherWidget.tsx
View File

@@ -15,7 +15,6 @@ const WeatherWidget = () => {
const [loading, setLoading] = useState(true); const [loading, setLoading] = useState(true);
useEffect(() => {
const getApproxLocation = async () => { const getApproxLocation = async () => {
const res = await fetch('https://ipwhois.app/json/'); const res = await fetch('https://ipwhois.app/json/');
const data = await res.json(); const data = await res.json();
@@ -70,6 +69,7 @@ const WeatherWidget = () => {
} }
}; };
const updateWeather = async () => {
getLocation(async (location) => { getLocation(async (location) => {
const res = await fetch(`/api/weather`, { const res = await fetch(`/api/weather`, {
method: 'POST', method: 'POST',
@@ -100,10 +100,16 @@ const WeatherWidget = () => {
}); });
setLoading(false); setLoading(false);
}); });
};
useEffect(() => {
updateWeather();
const intervalId = setInterval(updateWeather, 2 * 60 * 1000);
return () => clearInterval(intervalId);
}, []); }, []);
return ( return (
<div className="bg-light-secondary dark:bg-dark-secondary rounded-xl border border-light-200 dark:border-dark-200 shadow-sm flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3"> <div className="bg-light-secondary dark:bg-dark-secondary rounded-2xl border border-light-200 dark:border-dark-200 shadow-sm shadow-light-200/10 dark:shadow-black/25 flex flex-row items-center w-full h-24 min-h-[96px] max-h-[96px] px-3 py-2 gap-3">
{loading ? ( {loading ? (
<> <>
<div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full animate-pulse"> <div className="flex flex-col items-center justify-center w-16 min-w-16 max-w-16 h-full animate-pulse">
@@ -134,22 +140,24 @@ const WeatherWidget = () => {
{data.temperature}°{data.temperatureUnit} {data.temperature}°{data.temperatureUnit}
</span> </span>
</div> </div>
<div className="flex flex-col justify-between flex-1 h-full py-1"> <div className="flex flex-col justify-between flex-1 h-full py-2">
<div className="flex flex-row items-center justify-between"> <div className="flex flex-row items-center justify-between">
<span className="text-xs font-medium text-black dark:text-white"> <span className="text-sm font-semibold text-black dark:text-white">
{data.location} {data.location}
</span> </span>
<span className="flex items-center text-xs text-black/60 dark:text-white/60"> <span className="flex items-center text-xs text-black/60 dark:text-white/60 font-medium">
<Wind className="w-3 h-3 mr-1" /> <Wind className="w-3 h-3 mr-1" />
{data.windSpeed} {data.windSpeedUnit} {data.windSpeed} {data.windSpeedUnit}
</span> </span>
</div> </div>
<span className="text-xs text-black/60 dark:text-white/60 mt-1"> <span className="text-xs text-black/50 dark:text-white/50 italic">
{data.condition} {data.condition}
</span> </span>
<div className="flex flex-row justify-between w-full mt-auto pt-1 border-t border-light-200 dark:border-dark-200 text-xs text-black/60 dark:text-white/60"> <div className="flex flex-row justify-between w-full mt-auto pt-2 border-t border-light-200/50 dark:border-dark-200/50 text-xs text-black/50 dark:text-white/50 font-medium">
<span>Humidity: {data.humidity}%</span> <span>Humidity {data.humidity}%</span>
<span>Now</span> <span className="font-semibold text-black/70 dark:text-white/70">
Now
</span>
</div> </div>
</div> </div>
</> </>