mirror of
https://github.com/hazemKrimi/personal-website.git
synced 2026-05-01 18:00:26 +00:00
Update folder structure for pages and some components
This commit is contained in:
Hazem Krimi
@@ -0,0 +1,33 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Btn } from './styles';
|
||||
import Link from 'next/link';
|
||||
|
||||
const Button: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
href,
|
||||
target,
|
||||
onClick,
|
||||
children,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
dark={dark}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -1,17 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import Link from 'next/link';
|
||||
import { Props } from './types';
|
||||
|
||||
interface Props {
|
||||
variant?: 'outline' | 'text';
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
dark?: boolean;
|
||||
}
|
||||
|
||||
const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
export const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
position: relative;
|
||||
display: inline;
|
||||
cursor: pointer;
|
||||
@@ -53,31 +43,3 @@ const Btn = styled.button<Omit<Props, 'href'>>`
|
||||
transform: scaleX(1);
|
||||
}
|
||||
`;
|
||||
|
||||
const Button: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
href,
|
||||
target,
|
||||
onClick,
|
||||
children,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Link href={href} passHref>
|
||||
<Btn
|
||||
as='a'
|
||||
target={target}
|
||||
variant={variant}
|
||||
dark={dark}
|
||||
onClick={onClick}
|
||||
className={className}
|
||||
>
|
||||
{children}
|
||||
</Btn>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Button;
|
||||
@@ -0,0 +1,7 @@
|
||||
export type Props = {
|
||||
variant?: 'outline' | 'text';
|
||||
href: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
onClick?: () => void;
|
||||
dark?: boolean;
|
||||
};
|
||||
@@ -1,102 +0,0 @@
|
||||
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;
|
||||
}
|
||||
|
||||
const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 150px;
|
||||
align-items: stretch;
|
||||
transition: color 0ms ease-in-out;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
|
||||
&:hover {
|
||||
& > div {
|
||||
background: ${({ theme }) => theme.colors.blue};
|
||||
color: ${({ theme }) => theme.colors.dark.text};
|
||||
}
|
||||
|
||||
img {
|
||||
filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 1rem 0rem;
|
||||
background: var(--secondary-background);
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.75rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
padding: 0rem 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
`;
|
||||
|
||||
const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<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} </span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{image ? (
|
||||
<Image src={image} width='100%' height='100%' layout='responsive' />
|
||||
) : (
|
||||
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
|
||||
)}
|
||||
</StyledCard>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,44 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { StyledCard } from './styles';
|
||||
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;
|
||||
}
|
||||
|
||||
const Card: FC<Props> = ({ title, description, image, tags, href, target, onClick }) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<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} </span>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
{image ? (
|
||||
<Image src={image} width='100%' height='100%' layout='responsive' />
|
||||
) : (
|
||||
<Image src='/no-image.png' width='100%' height='100%' layout='responsive' />
|
||||
)}
|
||||
</StyledCard>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Card;
|
||||
@@ -0,0 +1,59 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledCard = styled.div<{ dark: boolean; image: boolean }>`
|
||||
cursor: pointer;
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 150px;
|
||||
align-items: stretch;
|
||||
transition: color 0ms ease-in-out;
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
|
||||
&:hover {
|
||||
& > div {
|
||||
background: ${({ theme }) => theme.colors.blue};
|
||||
color: ${({ theme }) => theme.colors.dark.text};
|
||||
}
|
||||
|
||||
img {
|
||||
filter: ${({ image }) => (image ? 'grayscale(80%)' : 'none')};
|
||||
}
|
||||
}
|
||||
|
||||
& > div {
|
||||
padding: 1rem 0rem;
|
||||
background: var(--secondary-background);
|
||||
display: grid;
|
||||
row-gap: 0.5rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0.75rem 0rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3,
|
||||
p,
|
||||
.tags-wrapper {
|
||||
padding: 0rem 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
padding: 0rem 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.3rem;
|
||||
}
|
||||
|
||||
.tags-wrapper {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
align-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
span {
|
||||
font-size: 0.7rem;
|
||||
}
|
||||
`;
|
||||
@@ -1,30 +1,7 @@
|
||||
import { FC } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
|
||||
import theme from 'prism-react-renderer/themes/vsDark';
|
||||
|
||||
const Pre = styled.pre`
|
||||
text-align: left;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
overflow: scroll;
|
||||
`;
|
||||
|
||||
const Line = styled.div`
|
||||
display: table-row;
|
||||
`;
|
||||
|
||||
const LineNo = styled.span`
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
const LineContent = styled.span`
|
||||
display: table-cell;
|
||||
`;
|
||||
import { Line, LineContent, LineNo, Pre } from './styles';
|
||||
|
||||
const CodeBlock: FC<{ className: string }> = ({ children, className }) => {
|
||||
const language = className.replace(/language-/, '') as Language;
|
||||
@@ -0,0 +1,24 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Pre = styled.pre`
|
||||
text-align: left;
|
||||
margin: 1em 0;
|
||||
padding: 0.5em;
|
||||
overflow: scroll;
|
||||
`;
|
||||
|
||||
export const Line = styled.div`
|
||||
display: table-row;
|
||||
`;
|
||||
|
||||
export const LineNo = styled.span`
|
||||
display: table-cell;
|
||||
text-align: right;
|
||||
padding-right: 1em;
|
||||
user-select: none;
|
||||
opacity: 0.5;
|
||||
`;
|
||||
|
||||
export const LineContent = styled.span`
|
||||
display: table-cell;
|
||||
`;
|
||||
@@ -1,47 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import IconButton from '../components/IconButton';
|
||||
|
||||
const StyledFooter = styled.footer`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 16px);
|
||||
column-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { StyledFooter } from './styles';
|
||||
import IconButton from '../../components/IconButton';
|
||||
|
||||
const Footer: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
@@ -0,0 +1,41 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const StyledFooter = styled.footer`
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
min-height: 100px;
|
||||
width: 85%;
|
||||
margin: auto;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 2rem;
|
||||
justify-content: flex-end;
|
||||
align-content: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
.contact {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, 16px);
|
||||
column-gap: 1rem;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
display: inline;
|
||||
text-align: right;
|
||||
font-weight: bold;
|
||||
}
|
||||
`;
|
||||
@@ -1,72 +0,0 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Wrapper = styled.div`
|
||||
min-height: 45vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 425px) {
|
||||
min-height: 65vh;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.illustration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
}
|
||||
`;
|
||||
|
||||
const Hero: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className='intro'>
|
||||
<h2>Hi, I am Hazem</h2>
|
||||
<h2>I Like Building Things</h2>
|
||||
<h2 className='blue'>Software Developer</h2>
|
||||
<h2 className='blue'>Life Long Learner</h2>
|
||||
</div>
|
||||
<div className='illustration'>
|
||||
<Image
|
||||
src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
|
||||
width='100%'
|
||||
height='100%'
|
||||
layout='responsive'
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,29 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Wrapper } from './styles';
|
||||
import Image from 'next/image';
|
||||
|
||||
const Hero: FC = () => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
return (
|
||||
<Wrapper>
|
||||
<div className='intro'>
|
||||
<h2>Hi, I am Hazem</h2>
|
||||
<h2>I Like Building Things</h2>
|
||||
<h2 className='blue'>Software Developer</h2>
|
||||
<h2 className='blue'>Life Long Learner</h2>
|
||||
</div>
|
||||
<div className='illustration'>
|
||||
<Image
|
||||
src={dark ? '/dark-illustration.svg' : '/light-illustration.svg'}
|
||||
width='100%'
|
||||
height='100%'
|
||||
layout='responsive'
|
||||
/>
|
||||
</div>
|
||||
</Wrapper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Hero;
|
||||
@@ -0,0 +1,44 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Wrapper = styled.div`
|
||||
min-height: 45vh;
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
align-items: center;
|
||||
height: auto;
|
||||
text-align: left;
|
||||
|
||||
@media (max-width: 425px) {
|
||||
min-height: 65vh;
|
||||
grid-template-columns: auto;
|
||||
|
||||
.illustration {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.5rem;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
@media (min-width: 2560px) {
|
||||
font-size: 3.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.small {
|
||||
font-size: 1rem;
|
||||
font-weight: normal;
|
||||
|
||||
@media (min-width: 1440px) {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: ${({ theme }) => theme.colors.blue};
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,39 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../../components/DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Btn } from './styles';
|
||||
import Link from 'next/link';
|
||||
|
||||
const MDXButton: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
type = 'button',
|
||||
link,
|
||||
target,
|
||||
children,
|
||||
disabled,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default MDXButton;
|
||||
@@ -1,18 +1,7 @@
|
||||
import { FC, useContext } from 'react';
|
||||
import { DarkModeContext } from '../components/DarkMode';
|
||||
import Link from 'next/link';
|
||||
import styled from 'styled-components';
|
||||
import { Props } from './types';
|
||||
|
||||
interface Props {
|
||||
variant?: 'outline' | 'text' | 'action';
|
||||
type?: 'button' | 'submit';
|
||||
link?: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
dark?: boolean;
|
||||
disabled?: boolean;
|
||||
}
|
||||
|
||||
const Btn = styled.button<Props>`
|
||||
export const Btn = styled.button<Props>`
|
||||
cursor: pointer;
|
||||
display: ${({ variant }) =>
|
||||
['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
|
||||
@@ -46,37 +35,3 @@ const Btn = styled.button<Props>`
|
||||
['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
|
||||
}
|
||||
`;
|
||||
|
||||
const MDXButton: FC<Props & { className?: string }> = ({
|
||||
variant = 'text',
|
||||
type = 'button',
|
||||
link,
|
||||
target,
|
||||
children,
|
||||
disabled,
|
||||
className
|
||||
}) => {
|
||||
const { dark } = useContext(DarkModeContext);
|
||||
|
||||
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>
|
||||
);
|
||||
};
|
||||
|
||||
export default MDXButton;
|
||||
@@ -0,0 +1,8 @@
|
||||
export type Props = {
|
||||
variant?: 'outline' | 'text' | 'action';
|
||||
type?: 'button' | 'submit';
|
||||
link?: string;
|
||||
target?: HTMLAnchorElement['target'];
|
||||
dark?: boolean;
|
||||
disabled?: boolean;
|
||||
};
|
||||
@@ -1,53 +1,9 @@
|
||||
import { FC, useContext, useRef, useEffect } from 'react';
|
||||
import { DarkModeContext } from './DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import IconButton from './IconButton';
|
||||
import Button from './Button';
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
close: () => void;
|
||||
}
|
||||
|
||||
interface StyledProps {
|
||||
dark: boolean;
|
||||
open: boolean;
|
||||
}
|
||||
|
||||
const Bar = styled.nav<StyledProps>`
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
background: var(--text);
|
||||
transition: transform 250ms ease-in-out;
|
||||
display: grid;
|
||||
grid-template-rows: 30% repeat(4, 50px);
|
||||
padding: 1rem 1rem 5rem 1rem;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-button-wrapper {
|
||||
display: flex;
|
||||
margin: 0rem 1rem;
|
||||
|
||||
a {
|
||||
color: var(--text-inverted) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import { DarkModeContext } from '../DarkMode';
|
||||
import { Props } from './types';
|
||||
import { Bar } from './styles';
|
||||
import IconButton from '../IconButton';
|
||||
import Button from '../Button';
|
||||
|
||||
const MobileNav: FC<Props> = ({ open, close }) => {
|
||||
const { dark, toggle } = useContext(DarkModeContext);
|
||||
@@ -0,0 +1,37 @@
|
||||
import styled from 'styled-components';
|
||||
import { StyledProps } from './types';
|
||||
|
||||
export const Bar = styled.nav<StyledProps>`
|
||||
position: fixed;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
right: 0;
|
||||
transform-origin: right;
|
||||
transform: ${({ open }) => (open ? 'translateX(0%)' : 'translateX(100%)')};
|
||||
width: 80%;
|
||||
height: 100vh;
|
||||
background: var(--text);
|
||||
transition: transform 250ms ease-in-out;
|
||||
display: grid;
|
||||
grid-template-rows: 30% repeat(4, 50px);
|
||||
padding: 1rem 1rem 5rem 1rem;
|
||||
|
||||
@media (orientation: landscape) {
|
||||
grid-template-rows: auto;
|
||||
}
|
||||
|
||||
.close {
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
.mobile-button-wrapper {
|
||||
display: flex;
|
||||
margin: 0rem 1rem;
|
||||
|
||||
a {
|
||||
color: var(--text-inverted) !important;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -0,0 +1,9 @@
|
||||
export type Props = {
|
||||
open: boolean;
|
||||
close: () => void;
|
||||
};
|
||||
|
||||
export type StyledProps = {
|
||||
dark: boolean;
|
||||
open: boolean;
|
||||
};
|
||||
@@ -1,69 +1,11 @@
|
||||
import { FC, useContext, useState } from 'react';
|
||||
import { DarkModeContext } from './DarkMode';
|
||||
import styled from 'styled-components';
|
||||
import { DarkModeContext } from '../DarkMode';
|
||||
import { Bar } from './styles';
|
||||
import Link from 'next/link';
|
||||
import Image from 'next/image';
|
||||
import Button from './Button';
|
||||
import IconButton from './IconButton';
|
||||
import MobileNav from './MobileNav';
|
||||
|
||||
const Bar = styled.nav`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div,
|
||||
a.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.logo {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-template-columns: repeat(5, auto);
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
`;
|
||||
import Button from '../Button';
|
||||
import IconButton from '../IconButton';
|
||||
import MobileNav from '../MobileNav';
|
||||
|
||||
const Nav: FC = () => {
|
||||
const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
|
||||
@@ -0,0 +1,59 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
export const Bar = styled.nav`
|
||||
width: 100%;
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
align-items: center;
|
||||
padding: 1rem 0rem;
|
||||
|
||||
* {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.7rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
div,
|
||||
a.logo {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
column-gap: 1rem;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
column-gap: 0.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
a.logo {
|
||||
text-decoration: none;
|
||||
color: var(--text);
|
||||
cursor: pointer;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
grid-template-columns: repeat(5, auto);
|
||||
justify-content: flex-end;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-buttons {
|
||||
display: none;
|
||||
|
||||
@media (max-width: 768px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, auto);
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
`;
|
||||
@@ -2,7 +2,7 @@ import { CodePen, Gist, YouTube, CodeSandbox, Vimeo, Tweet } from 'mdx-embed';
|
||||
import Image from 'next/image';
|
||||
import MDXButton from './MDXButton';
|
||||
|
||||
const All = {
|
||||
export default {
|
||||
Button: MDXButton,
|
||||
Image,
|
||||
CodePen,
|
||||
@@ -12,5 +12,3 @@ const All = {
|
||||
Tweet,
|
||||
YouTube
|
||||
};
|
||||
|
||||
export default All;
|
||||
Reference in New Issue
Block a user