feat: update logo component to support caption display in footer
- Modified the Logo component to accept a new 'hasCaption' prop for conditional rendering of a caption. - Updated the FooterSection to utilize the new 'hasCaption' prop, enhancing the logo presentation with additional text and a separator.
This commit is contained in:
@@ -20,7 +20,7 @@ export default function FooterSection() {
|
|||||||
return (
|
return (
|
||||||
<footer className="py-16 md:py-16 bg-muted border-t">
|
<footer className="py-16 md:py-16 bg-muted border-t">
|
||||||
<div className="mx-auto max-w-5xl px-6 flex items-center flex-col">
|
<div className="mx-auto max-w-5xl px-6 flex items-center flex-col">
|
||||||
<Logo className="mx-auto" />
|
<Logo hasCaption className="mx-auto" />
|
||||||
|
|
||||||
<div className="my-4 flex flex-wrap justify-center gap-6 text-sm">
|
<div className="my-4 flex flex-wrap justify-center gap-6 text-sm">
|
||||||
{links.map((link, index) => (
|
{links.map((link, index) => (
|
||||||
|
|||||||
+14
-2
@@ -1,18 +1,30 @@
|
|||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
import Image from "next/image";
|
import Image from "next/image";
|
||||||
import Link from "next/link";
|
import Link from "next/link";
|
||||||
|
import { Separator } from "./ui/separator";
|
||||||
|
|
||||||
export const Logo = ({
|
export const Logo = ({
|
||||||
className,
|
className,
|
||||||
uniColor,
|
uniColor,
|
||||||
|
hasCaption
|
||||||
}: {
|
}: {
|
||||||
className?: string;
|
className?: string;
|
||||||
uniColor?: boolean;
|
uniColor?: boolean;
|
||||||
|
hasCaption?: boolean;
|
||||||
}) => {
|
}) => {
|
||||||
|
const _feep = <span className="font-bold text-xl leading-tight">فـــیــپ</span>
|
||||||
return (
|
return (
|
||||||
<Link href="/" className="flex items-center">
|
<Link href="/" className={`flex items-center ${hasCaption ? 'flex-col' : 'gap-2'}`}>
|
||||||
<LogoIcon className={className} uniColor={uniColor} />
|
<LogoIcon className={className} uniColor={uniColor} />
|
||||||
<span className="font-bold text-xl">فـــیــپ</span>
|
{hasCaption ?
|
||||||
|
<span className="flex flex-col items-center">
|
||||||
|
{_feep}
|
||||||
|
<span className="text-xs text-muted-foreground font-normal leading-tight">
|
||||||
|
دادهها فهمیده میشوند
|
||||||
|
</span>
|
||||||
|
<Separator className="mt-2 max-w-10" />
|
||||||
|
</span>
|
||||||
|
: _feep}
|
||||||
</Link>
|
</Link>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|||||||
Reference in New Issue
Block a user