83 lines
2.2 KiB
TypeScript
83 lines
2.2 KiB
TypeScript
import classNames from "classnames"
|
|
|
|
function Logo({ small }: { small?: boolean }) {
|
|
return (
|
|
<div className="relative flex flex-col items-center rounded-sm border-x-4 border-y-2 border-shield-gray bg-shield-lightgray md:border-x-8 md:border-y-4">
|
|
<h1
|
|
className={classNames(
|
|
"font-checkpoint mx-16 my-2 flex flex-col gap-2 border-y-2 border-slate-700 text-center text-2xl leading-tight tracking-widest sm:mx-24 sm:my-3 sm:gap-3 sm:border-y-[3px] sm:text-4xl md:mx-36 md:my-4 md:gap-4 md:border-y-4 md:text-5xl",
|
|
{ "xl:gap-6 xl:py-2 xl:text-6xl": !small },
|
|
)}
|
|
>
|
|
<span>Leaky</span>
|
|
<span>Ships</span>
|
|
</h1>
|
|
<Screws small={small} />
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function Screws({ small }: { small?: boolean }) {
|
|
return (
|
|
<>
|
|
<Screw
|
|
small={small}
|
|
orientation={classNames("top-1 left-1 sm:top-2 sm:left-2", {
|
|
"xl:top-4 xl:left-4": !small,
|
|
})}
|
|
rotation="rotate-[135deg]"
|
|
/>
|
|
<Screw
|
|
small={small}
|
|
orientation={classNames("top-1 right-1 sm:top-2 sm:right-2", {
|
|
"xl:top-4 xl:right-4": !small,
|
|
})}
|
|
rotation="rotate-[5deg]"
|
|
/>
|
|
<Screw
|
|
small={small}
|
|
orientation={classNames("bottom-1 right-1 sm:bottom-2 sm:right-2", {
|
|
"xl:bottom-4 xl:right-4": !small,
|
|
})}
|
|
rotation="rotate-[150deg]"
|
|
/>
|
|
<Screw
|
|
small={small}
|
|
orientation={classNames("bottom-1 left-1 sm:bottom-2 sm:left-2", {
|
|
"xl:bottom-4 xl:left-4": !small,
|
|
})}
|
|
rotation="rotate-[20deg]"
|
|
/>
|
|
</>
|
|
)
|
|
}
|
|
|
|
function Screw({
|
|
orientation,
|
|
rotation,
|
|
small,
|
|
}: {
|
|
orientation: string
|
|
rotation: string
|
|
small?: boolean
|
|
}) {
|
|
return (
|
|
<div
|
|
className={classNames(
|
|
"absolute flex h-3 w-3 flex-col items-center justify-center rounded-full border-[1px] border-neutral-700 bg-neutral-400 sm:h-5 sm:w-5 sm:border-2 md:h-6 md:w-6",
|
|
{ "xl:h-8 xl:w-8": !small },
|
|
orientation,
|
|
)}
|
|
>
|
|
<hr
|
|
className={classNames(
|
|
"color w-full border-neutral-500 sm:border-t-2",
|
|
{ "xl:border-t-4": !small },
|
|
rotation,
|
|
)}
|
|
/>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Logo
|