Browse Source

🔧 Refactor Logo component

🖼️ Update image handling and comments
🚀 Improve code readability
🔌 Add options for both light and dark logos
 Enhance Logo component functionality
main
John Doe 1 year ago
parent
commit
c8a31c65ec
  1. 50
      src/shared/Logo.tsx

50
src/shared/Logo.tsx

@ -0,0 +1,50 @@
import React from "react";
import logoImg from "@/images/logo.png";
import logoLightImg from "@/images/logo-light.png";
import LogoSvgLight from "./LogoSvgLight";
import LogoSvg from "./LogoSvg";
import Link from "next/link";
import { StaticImageData } from "next/image";
export interface LogoProps {
img?: StaticImageData;
imgLight?: StaticImageData;
className?: string;
}
const Logo: React.FC<LogoProps> = ({
img = logoImg,
imgLight = logoLightImg,
className = "w-24",
}) => {
return (
<Link
href="/"
className={`ttnc-logo inline-block text-primary-6000 focus:outline-none focus:ring-0 ${className}`}
>
<LogoSvgLight />
<LogoSvg />
{/* THIS USE FOR MY CLIENT */}
{/* PLEASE UN COMMENT BELLOW CODE AND USE IT */}
{/* {img ? (
<img
className={`block max-h-12 ${imgLight ? "dark:hidden" : ""}`}
src={img}
alt="Logo"
/>
) : (
"Logo Here"
)}
{imgLight && (
<img
className="hidden max-h-12 dark:block"
src={imgLight}
alt="Logo-Light"
/>
)} */}
</Link>
);
};
export default Logo;
Loading…
Cancel
Save