hazemKrimi/personal-website
1
0
Fork 0
mirror of https://github.com/hazemKrimi/personal-website.git synced 2026-05-01 18:00:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Update button behavior to work as link

Browse Source
This commit is contained in:
Hazem Krimi
2021-12-12 14:56:22 +01:00
parent b2453ae6dd
commit 08dc652d25
14 changed files with 1261 additions and 1100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Button.tsx
+23 -5
View File
@@ -1,13 +1,17 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import styled from 'styled-components';
import Link from 'next/link';
interface Props {
variant?: 'outline' | 'text';
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
dark?: boolean;
}
const Btn = styled.button<Props>`
const Btn = styled.button<Omit<Props, 'href'>>`
position: relative;
display: inline;
cursor: pointer;
@@ -19,6 +23,7 @@ const Btn = styled.button<Props>`
text-transform: ${({ variant }) => (variant === 'outline' ? 'uppercase' : 'inherit')};
padding: ${({ variant }) => (variant === 'outline' ? '.5rem 1rem' : '0rem')};
text-align: left;
text-decoration: none;
transition: color 250ms ease-in-out;
z-index: 1;
@@ -41,7 +46,9 @@ const Btn = styled.button<Props>`
}
&:hover {
color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
@media (min-width: 768px) {
color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
}
}
&:hover::before {
@@ -51,6 +58,8 @@ const Btn = styled.button<Props>`
const Button: FC<Props & { className?: string }> = ({
variant = 'text',
href,
target,
onClick,
children,
className
@@ -58,9 +67,18 @@ const Button: FC<Props & { className?: string }> = ({
const { dark } = useContext(DarkModeContext);
return (
<Btn variant={variant} dark={dark} onClick={onClick} className={className}>
{children}
</Btn>
<Link href={href} passHref>
<Btn
as='a'
target={target}
variant={variant}
dark={dark}
onClick={onClick}
className={className}
>
{children}
</Btn>
</Link>
);
};
components/Card.tsx
+25 -18
View File
@@ -2,12 +2,15 @@ import { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import styled from 'styled-components';
import Image from 'next/image';
import Link from 'next/link';
interface Props {
title: string;
description: string;
image?: string;
tags?: string[];
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
}
@@ -18,6 +21,8 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
grid-template-columns: auto 150px;
align-items: stretch;
transition: color 0ms ease-in-out;
text-decoration: none;
color: var(--text);
&:hover {
& > div {
@@ -67,28 +72,30 @@ const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
}
`;
const Card: FC<Props> = ({ title, description, image, tags, onClick }) => {
const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
const { dark } = useContext(DarkModeContext);
return (
<StyledCard dark={dark} onClick={onClick} image={!!image}>
<div>
<h3>{title}</h3>
<p>{description}</p>
{tags && (
<div className='tags-wrapper'>
{tags.map((tag, index) => (
<span key={index}>#{tag}&nbsp;</span>
))}
</div>
<Link href={href} passHref>
<StyledCard as='a' target={target} dark={dark} onClick={onClick} image={!!image}>
<div>
<h3>{title}</h3>
<p>{description}</p>
{tags && (
<div className='tags-wrapper'>
{tags.map((tag, index) => (
<span key={index}>#{tag}&nbsp;</span>
))}
</div>
)}
</div>
{image ? (
<Image src={image} width='100%' height='100%' layout='responsive' />
) : (
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
)}
</div>
{image ? (
<Image src={image} width='100%' height='100%' layout='responsive' />
) : (
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
)}
</StyledCard>
</StyledCard>
</Link>
);
};
components/Footer.tsx
+10 -5
View File
@@ -53,31 +53,36 @@ const Footer: FC = () => {
icon={dark ? '/icons/light-github.svg' : '/icons/dark-github.svg'}
width={16}
height={16}
onClick={() => window.open('https://github.com/hazemKrimi', '_blank')}
href='https://github.com/hazemKrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-twitter.svg' : '/icons/dark-twitter.svg'}
width={16}
height={16}
onClick={() => window.open('https://twitter.com/HazemKrimi', '_blank')}
href='https://twitter.com/HazemKrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-linkedin.svg' : '/icons/dark-linkedin.svg'}
width={16}
height={16}
onClick={() => window.open('https://linkedin.com/in/hazemkrimi', '_blank')}
href='https://linkedin.com/in/hazemkrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-codepen.svg' : '/icons/dark-codepen.svg'}
width={16}
height={16}
onClick={() => window.open('https://codepen.io/hazemkrimi', '_blank')}
href='https://codepen.io/hazemkrimi'
target='_blank'
/>
<IconButton
icon={dark ? '/icons/light-dribbble.svg' : '/icons/dark-dribbble.svg'}
width={16}
height={16}
onClick={() => window.open('https://dribbble.com/HazemKrimi', '_blank')}
href='https://dribbble.com/HazemKrimi'
target='_blank'
/>
</div>
<p>Hazem Krimi &copy; {new Date().getFullYear()}</p>
components/Hero.tsx
-1
View File
@@ -55,7 +55,6 @@ const Hero: FC = () => {
<h2>Hi, I am Hazem</h2>
<h2>I Like Building Things</h2>
<h2 className='blue'>Software Developer</h2>
<h2 className='blue'>Hard Working</h2>
<h2 className='blue'>Life Long Learner</h2>
</div>
<div className='illustration'>
components/IconButton.tsx
+13 -1
View File
@@ -1,10 +1,14 @@
import { FC } from 'react';
import styled from 'styled-components';
import Image from 'next/image';
import Link from 'next/link';
interface Props {
icon: string;
width?: number;
height?: number;
href?: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
}
@@ -18,15 +22,23 @@ const Btn = styled.button`
const IconButton: FC<Props & { className?: string }> = ({
icon,
href,
target,
onClick,
className,
width = 24,
height = 24
}) => {
return (
return !href ? (
<Btn onClick={onClick} className={className}>
<Image src={icon} width={width} height={height} />
</Btn>
) : (
<Link href={href} passHref>
<Btn as='a' target={target} onClick={onClick} className={className}>
<Image src={icon} width={width} height={height} />
</Btn>
</Link>
);
};
components/MDXButton.tsx
+20 -11
View File
@@ -1,11 +1,13 @@
import { FC, useContext } from 'react';
import { DarkModeContext } from '../components/DarkMode';
import Link from 'next/link';
import styled from 'styled-components';
interface Props {
variant?: 'outline' | 'text' | 'action';
type?: 'button' | 'submit';
link?: string;
target?: HTMLAnchorElement['target'];
dark?: boolean;
disabled?: boolean;
}
@@ -29,6 +31,7 @@ const Btn = styled.button<Props>`
['action', 'outline'].includes(variant as string) ? '.5rem 1rem' : '0rem'};
text-align: ${({ variant }) =>
['action', 'outline'].includes(variant as string) ? 'center' : 'left'};
text-decoration: none;
transition: color 250ms ease-in-out;
${({ disabled }) =>
@@ -48,23 +51,29 @@ const MDXButton: FC<Props & { className?: string }> = ({
variant = 'text',
type = 'button',
link,
target,
children,
disabled,
className
}) => {
const { dark } = useContext(DarkModeContext);
return (
<Btn
variant={variant}
type={type}
dark={dark}
onClick={() => {
if (link) window.open(link, '_blank');
}}
disabled={disabled}
className={className}
>
return link ? (
<Link href={link} passHref>
<Btn
as='a'
target={target}
variant={variant}
type={type}
dark={dark}
disabled={disabled}
className={className}
>
{children}
</Btn>
</Link>
) : (
<Btn variant={variant} type={type} dark={dark} disabled={disabled} className={className}>
{children}
</Btn>
);
components/MobileNav.tsx
+8 -29
View File
@@ -1,6 +1,5 @@
import { FC, useContext, useRef, useEffect } from 'react';
import { DarkModeContext } from './DarkMode';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import IconButton from './IconButton';
import Button from './Button';
@@ -44,7 +43,7 @@ const Bar = styled.nav<StyledProps>`
display: flex;
margin: 0rem 1rem;
button {
a {
color: var(--text-inverted) !important;
}
}
@@ -53,7 +52,6 @@ const Bar = styled.nav<StyledProps>`
const MobileNav: FC<Props> = ({ open, close }) => {
const { dark, toggle } = useContext(DarkModeContext);
const ref = useRef<HTMLDivElement>(null);
const router = useRouter();
useEffect(() => {
document.addEventListener('mousedown', (event: MouseEvent) => {
@@ -83,37 +81,18 @@ const MobileNav: FC<Props> = ({ open, close }) => {
/>
</div>
<div className='mobile-button-wrapper'>
<Button onClick={() => toggle()}>{dark ? 'Light Mode' : 'Dark Mode'}</Button>
</div>
<div className='mobile-button-wrapper'>
<Button
onClick={() => {
close();
router.push('/about');
}}
>
About
<Button href='#' onClick={() => toggle()}>
{dark ? 'Light Mode' : 'Dark Mode'}
</Button>
</div>
<div className='mobile-button-wrapper'>
<Button
onClick={() => {
close();
router.push('/portfolio');
}}
>
Portfolio
</Button>
<Button href='/about'>About</Button>
</div>
<div className='mobile-button-wrapper'>
<Button
onClick={() => {
close();
router.push('/blog');
}}
>
Blog
</Button>
<Button href='/portfolio'>Portfolio</Button>
</div>
<div className='mobile-button-wrapper'>
<Button href='/blog'>Blog</Button>
</div>
</Bar>
);
components/Nav.tsx
+23 -19
View File
@@ -1,7 +1,7 @@
import { FC, useContext, useState } from 'react';
import { DarkModeContext } from './DarkMode';
import { useRouter } from 'next/router';
import styled from 'styled-components';
import Link from 'next/link';
import Image from 'next/image';
import Button from './Button';
import IconButton from './IconButton';
@@ -26,7 +26,8 @@ const Bar = styled.nav`
}
}
div {
div,
a.logo {
display: grid;
align-items: center;
column-gap: 1rem;
@@ -36,7 +37,9 @@ const Bar = styled.nav`
}
}
.logo {
a.logo {
text-decoration: none;
color: var(--text);
cursor: pointer;
grid-template-columns: repeat(2, auto);
justify-content: flex-start;
@@ -65,31 +68,32 @@ const Bar = styled.nav`
const Nav: FC = () => {
const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
const { dark, toggle } = useContext(DarkModeContext);
const router = useRouter();
return (
<Bar>
<div className='logo' onClick={() => router.push('/')}>
<Image
className='logo-image'
src={dark ? '/light-logo.svg' : '/dark-logo.svg'}
alt='Logo Image'
width={48}
height={48}
/>
<h1>Hazem Krimi</h1>
</div>
<Link href='/' passHref>
<a className='logo'>
<Image
className='logo-image'
src={dark ? '/light-logo.svg' : '/dark-logo.svg'}
alt='Logo Image'
width={48}
height={48}
/>
<h1>Hazem Krimi</h1>
</a>
</Link>
<div className='buttons'>
<IconButton icon={dark ? '/icons/sun.svg' : '/icons/moon.svg'} onClick={toggle} />
<Button onClick={() => router.push('/about')}>About</Button>
<Button onClick={() => router.push('/portfolio')}>Portfolio</Button>
<Button onClick={() => router.push('/blog')}>Blog</Button>
<Button variant='outline' onClick={() => window.open('/resume.pdf', '_blank')}>
<Button href='/about'>About</Button>
<Button href='/portfolio'>Portfolio</Button>
<Button href='/blog'>Blog</Button>
<Button href='/resume.pdf' target='_blank' variant='outline'>
Resume
</Button>
</div>
<div className='mobile-buttons'>
<Button variant='outline' onClick={() => window.open('/hazem-krimi.pdf', '_blank')}>
<Button href='/resume.pdf' target='_blank' variant='outline'>
Resume
</Button>
<IconButton