Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 | 1x 11x 11x 11x 11x 5x 5x 5x 2x 5x 11x 6x 11x 6x 11x | import React, { useState, useEffect } from 'react';
import { SeparatorVertical} from 'lucide-react';
import Link from "next/link";
import { GitHubVersion } from "@/components/custom/GitHubVersion";
// Define the props for the FooterBottom component.
// This allows you to pass in the copyright text.
interface FooterBottomProps {
text: string;
}
/**
* A minimal and professional-looking footer component for copyright information.
*
* @param {FooterBottomProps} props - The props for the component.
* @param {string} props.text - The custom text to be displayed in the copyright notice.
* @returns {JSX.Element} The rendered FooterBottom component.
*/
const FooterBottom: React.FC<FooterBottomProps> = ({ text }) => {
const [currentTime, setCurrentTime] = useState<Date | null>(null);
const [mounted, setMounted] = useState(false);
// Get the current year dynamically to keep the copyright up to date.
const currentYear = new Date().getFullYear();
// Update time every second
useEffect(() => {
setMounted(true);
setCurrentTime(new Date());
const timer = setInterval(() => {
setCurrentTime(new Date());
}, 1000); // Update every 1000 milliseconds (1 second)
return () => clearInterval(timer);
}, []);
// Format time in a clean, readable format
const formatTime = (date: Date) => {
return date.toLocaleTimeString('en-US', {
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: true
});
};
// Format date
const formatDate = (date: Date) => {
return date.toLocaleDateString('en-US', {
month: 'short',
day: 'numeric',
year: 'numeric'
});
};
return (
<footer className="relative border-t border-zinc-300 dark:border-zinc-700 bg-linear-to-r from-gray-50/80 via-white/60 to-gray-50/80 dark:from-gray-900/80 dark:via-gray-800/60 dark:to-gray-900/80 mt-5 pt-2 pb-2 backdrop-blur-sm">
<div className="absolute inset-0 bg-linear-to-r from-blue-500/2 via-purple-500/2 to-pink-500/2"></div>
<div className="container mx-auto px-4 relative">
<div className="flex flex-col md:flex-row md:items-center md:justify-between gap-3 md:gap-0 text-sm">
{/* Left section - Copyright and links */}
<div className="flex flex-col sm:flex-row items-center gap-2 sm:gap-3 text-gray-600 dark:text-gray-400">
<div className="flex items-center gap-2 sm:gap-3">
<span className="flex items-center gap-1">
<span className="text-gray-800 dark:text-gray-200 font-medium">©</span>
<span>2018 - {currentYear}</span>
</span>
<div className="hidden sm:block w-1 h-1 bg-linear-to-r from-blue-400 to-purple-400 rounded-full"></div>
<SeparatorVertical size={12} className="block sm:hidden" />
<span className="font-heading font-semibold bg-linear-to-r from-gray-800 to-gray-600 dark:from-gray-200 dark:to-gray-400 bg-clip-text text-transparent">
{text}
</span>
</div>
<div className="flex items-center gap-2 text-xs sm:text-sm">
<div className="hidden sm:block w-1 h-1 bg-linear-to-r from-purple-400 to-pink-400 rounded-full"></div>
<SeparatorVertical size={12} className="block sm:hidden" />
<span className="text-gray-500 dark:text-gray-500">All rights reserved</span>
<span className="text-gray-400">|</span>
<Link href="/privacy-policy" className="hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
<span className="text-gray-500 dark:text-gray-500">
<span className="hidden sm:inline">Privacy Policy</span>
<span className="sm:hidden">Privacy</span>
</span>
</Link>
<SeparatorVertical size={12} className="hidden sm:block" />
<span className="text-gray-400 sm:hidden">|</span>
<Link href="/terms-and-conditions" className="hover:text-gray-700 dark:hover:text-gray-300 transition-colors">
<span className="text-gray-500 dark:text-gray-500">
<span className="hidden sm:inline">Terms & Conditions</span>
<span className="sm:hidden">Terms</span>
</span>
</Link>
</div>
</div>
{/* Right section - Version and time */}
<div className="flex flex-col sm:flex-row items-center gap-3">
<span className="text-zinc-600 dark:text-zinc-400 text-xs sm:text-sm">
<span className="hidden md:inline px-2 font-heading">App Version: </span>
<span className="md:hidden">Version: </span>
<GitHubVersion owner="aamitn" repo="bitmutex-website" compact={true}/>
</span>
{/* Date and time display */}
<div className="flex items-center gap-2 bg-linear-to-r from-white/70 to-gray-50/70 dark:from-gray-800/70 dark:to-gray-700/70 backdrop-blur-md px-3 py-1.5 rounded-lg border border-gray-200/50 dark:border-gray-600/50 shadow-sm hover:shadow-md transition-all duration-300">
<div className="flex flex-col items-center sm:items-end">
{currentTime && (
<>
<span className="font-mono font-bold text-xs text-gray-700 dark:text-gray-300 tabular-nums leading-tight">
{formatTime(currentTime)}
</span>
<span className="font-mono font-medium text-[10px] text-gray-500 dark:text-gray-400 leading-tight">
{formatDate(currentTime)}
</span>
</>
)}
</div>
<div className="relative">
<div className="w-1.5 h-1.5 bg-green-400 rounded-full"></div>
<div className="absolute inset-0 w-1.5 h-1.5 bg-green-400 rounded-full animate-ping opacity-75"></div>
</div>
</div>
</div>
</div>
</div>
</footer>
);
};
export default FooterBottom; |