mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-29 16:07:40 +01:00
Move social links in header
This commit is contained in:
parent
6fcdef3fd7
commit
0b4c47bbd4
3 changed files with 13 additions and 19 deletions
|
@ -7,6 +7,7 @@ export interface IconPatchProps {
|
|||
className?: string;
|
||||
icon: Icons;
|
||||
transparent?: boolean;
|
||||
downsized?: boolean;
|
||||
}
|
||||
|
||||
export function IconPatch(props: IconPatchProps) {
|
||||
|
@ -19,11 +20,12 @@ export function IconPatch(props: IconPatchProps) {
|
|||
const activeClasses = props.active
|
||||
? "border-bink-600 bg-bink-100 text-bink-600"
|
||||
: "";
|
||||
const sizeClasses = props.downsized ? "h-10 w-10" : "h-12 w-12";
|
||||
|
||||
return (
|
||||
<div className={props.className || undefined} onClick={props.onClick}>
|
||||
<div
|
||||
className={`flex h-12 w-12 items-center justify-center rounded-full border-2 border-transparent bg-pill-background transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses}`}
|
||||
className={`flex items-center justify-center rounded-full border-2 border-transparent bg-pill-background bg-opacity-50 transition-[background-color,color,transform,border-color] duration-75 ${transparentClasses} ${clickableClasses} ${activeClasses} ${sizeClasses}`}
|
||||
>
|
||||
<Icon icon={props.icon} />
|
||||
</div>
|
||||
|
|
|
@ -40,35 +40,27 @@ export function Navigation(props: NavigationProps) {
|
|||
>
|
||||
<div className="pointer-events-none absolute -bottom-24 h-24 w-full bg-gradient-to-b from-background-main to-transparent" />
|
||||
</div>
|
||||
<div className="relative flex w-full items-center justify-center sm:w-fit">
|
||||
<div className="mr-auto sm:mr-6">
|
||||
<Link to="/">
|
||||
<BrandPill clickable />
|
||||
</Link>
|
||||
</div>
|
||||
{props.children}
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
props.children ? "hidden sm:flex" : "flex"
|
||||
} relative flex-row gap-4`}
|
||||
>
|
||||
<div className="relative flex w-full items-center sm:w-fit space-x-3">
|
||||
<Link className="block" to="/">
|
||||
<BrandPill clickable />
|
||||
</Link>
|
||||
<a
|
||||
href={conf().DISCORD_LINK}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-2xl text-white"
|
||||
className="text-xl text-white"
|
||||
>
|
||||
<IconPatch icon={Icons.DISCORD} clickable />
|
||||
<IconPatch icon={Icons.DISCORD} clickable downsized />
|
||||
</a>
|
||||
<a
|
||||
href={conf().GITHUB_LINK}
|
||||
target="_blank"
|
||||
rel="noreferrer"
|
||||
className="text-2xl text-white"
|
||||
className="text-xl text-white"
|
||||
>
|
||||
<IconPatch icon={Icons.GITHUB} clickable />
|
||||
<IconPatch icon={Icons.GITHUB} clickable downsized />
|
||||
</a>
|
||||
{props.children}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -8,7 +8,7 @@ interface ThinContainerProps {
|
|||
export function ThinContainer(props: ThinContainerProps) {
|
||||
return (
|
||||
<div
|
||||
className={`mx-auto w-[600px] max-w-full px-2 sm:px-0 ${
|
||||
className={`mx-auto w-[600px] max-w-full px-8 sm:px-0 ${
|
||||
props.classNames || ""
|
||||
}`}
|
||||
>
|
||||
|
|
Loading…
Reference in a new issue