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

Refactoring components

Browse Source
This commit is contained in:
Hazem Krimi
2023-03-19 18:21:12 +01:00
parent b82f90db48
commit 3a51b7fdb2
26 changed files with 171 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Card/index.tsx
+3 -13
View File
@@ -1,18 +1,8 @@
import { FC } from 'react';
import { StyledCard } from './styles';
import Image from 'next/image';
import { StyledCard } from './styles';
import { Props } from './types';
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 Card = ({ title, description, image, tags, href, target, onClick }: Props) => {
return (
<StyledCard href={href} onClick={onClick} image={image ? Boolean(image) : undefined} target={target}>
<div className='card-content'>
components/Card/types.ts
+9
View File
@@ -0,0 +1,9 @@
export interface Props {
title: string;
description: string;
image?: string;
tags?: string[];
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
}
components/CodeBlock/index.tsx
+2 -2
View File
@@ -1,9 +1,9 @@
import { FC } from 'react';
import Highlight, { defaultProps, Language } from 'prism-react-renderer';
import theme from 'prism-react-renderer/themes/vsDark';
import { Props } from './types';
import { Line, LineContent, LineNo, Pre } from './styles';
const CodeBlock: FC<{ className: string, children: React.ReactNode }> = ({ children, className }) => {
const CodeBlock = ({ children, className }: Props) => {
const language = className.replace(/language-/, '') as Language;
return (
components/CodeBlock/types.ts
+4
View File
@@ -0,0 +1,4 @@
export interface Props {
className: string;
children: React.ReactNode;
}
components/Footer/index.tsx
+3 -3
View File
@@ -1,9 +1,9 @@
import { FC, useContext } from 'react';
import { useContext } from 'react';
import { ThemeContext } from '../../styles/theme';
import { StyledFooter } from './styles';
import IconButton from '../../components/IconButton';
import IconButton from '../IconButton';
const Footer: FC = () => {
const Footer = () => {
const { mode } = useContext(ThemeContext);
return (
components/Hero/index.tsx
+1 -2
View File
@@ -1,8 +1,7 @@
import { FC } from 'react';
import { Wrapper } from './styles';
import Image from 'next/image';
const Hero: FC = () => (
const Hero = () => (
<Wrapper>
<div className='intro'>
<h2>Hi, I am Hazem</h2>
components/IconButton.tsx
-45
View File
@@ -1,45 +0,0 @@
import { FC } from 'react';
import styled from 'styled-components';
import Image from 'next/image';
import Link from 'next/link';
interface Props {
alt: string;
icon: string;
width?: number;
height?: number;
href?: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
}
const Btn = styled(Link)`
cursor: pointer;
background: none;
border: none;
display: inline-flex;
align-items: center;
`;
const IconButton: FC<Props & { className?: string }> = ({
alt,
icon,
href,
target,
onClick,
className,
width = 24,
height = 24
}) => {
return !href ? (
<Btn href='#' onClick={onClick} className={className}>
<Image alt={alt} src={icon} width={width} height={height} />
</Btn>
) : (
<Btn href={href} target={target} onClick={onClick} className={className}>
<Image alt={alt} src={icon} width={width} height={height} />
</Btn>
);
};
export default IconButton;
components/IconButton/index.tsx
+24
View File
@@ -0,0 +1,24 @@
import Image from 'next/image';
import { Props } from './types';
import { StyledButton, StyledLink } from './styles';
const IconButton = ({
alt,
icon,
href,
target,
onClick,
className,
width = 24,
height = 24
}: Props) => href ? (
<StyledLink href={href} target={target} onClick={onClick} className={className}>
<Image alt={alt} src={icon} width={width} height={height} />
</StyledLink>
) : (
<StyledButton onClick={onClick} className={className}>
<Image alt={alt} src={icon} width={width} height={height} />
</StyledButton>
);
export default IconButton;
components/IconButton/styles.tsx
+18
View File
@@ -0,0 +1,18 @@
import styled, { css } from 'styled-components';
import Link from 'next/link';
const sharedStyles = css`
cursor: pointer;
background: none;
border: none;
display: inline-flex;
align-items: center;
`;
export const StyledLink = styled(Link)`
${sharedStyles}
`;
export const StyledButton = styled.button`
${sharedStyles}
`;
components/IconButton/types.ts
+10
View File
@@ -0,0 +1,10 @@
export interface Props {
alt: string;
icon: string;
width?: number;
height?: number;
href?: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
className?: string;
}
components/Input.tsx
-62
View File
@@ -1,62 +0,0 @@
import React, { FC } from 'react';
import styled from 'styled-components';
interface Props {
placeholder?: string;
type: 'text' | 'email';
variant: 'small' | 'big';
name: string;
value: string;
required?: boolean;
onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
}
const SmallField = styled.input`
border: none;
padding: 1rem;
background: var(--secondary-background);
color: var(--text);
`;
const BigField = styled.textarea`
resize: none;
border: none;
padding: 1rem;
background: var(--secondary-background);
color: var(--text);
`;
const Input: FC<Props & { className?: string }> = ({
type = 'text',
variant = 'small',
name,
value,
required,
placeholder,
className,
onChange
}) => {
return variant === 'small' ? (
<SmallField
type={type}
name={name}
value={value}
required={required}
placeholder={placeholder}
className={className}
onChange={onChange}
/>
) : (
<BigField
name={name}
value={value}
required={required}
placeholder={placeholder}
className={className}
onChange={onChange}
rows={3}
/>
);
};
export default Input;
components/Input/index.tsx
+37
View File
@@ -0,0 +1,37 @@
import { BigField, SmallField } from "./styles";
import { Props } from "./types";
const Input = ({
type = 'text',
variant = 'small',
name,
value,
required,
placeholder,
className,
onChange
}: Props) => {
return variant === 'small' ? (
<SmallField
type={type}
name={name}
value={value}
required={required}
placeholder={placeholder}
className={className}
onChange={onChange}
/>
) : (
<BigField
name={name}
value={value}
required={required}
placeholder={placeholder}
className={className}
onChange={onChange}
rows={3}
/>
);
};
export default Input;
components/Input/styles.tsx
+16
View File
@@ -0,0 +1,16 @@
import styled from "styled-components";
export const SmallField = styled.input`
border: none;
padding: 1rem;
background: var(--secondary-background);
color: var(--text);
`;
export const BigField = styled.textarea`
resize: none;
border: none;
padding: 1rem;
background: var(--secondary-background);
color: var(--text);
`;
components/Input/types.ts
+10
View File
@@ -0,0 +1,10 @@
export interface Props {
placeholder?: string;
type: 'text' | 'email';
variant: 'small' | 'big';
name: string;
value: string;
required?: boolean;
onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
className?: string;
}
components/MDXButton/index.tsx
+5 -5
View File
@@ -1,7 +1,7 @@
import { useContext } from 'react';
import { ThemeContext } from '../../styles/theme';
import { Props } from './types';
import { Btn } from './styles';
import { StyledLink, StyledButton } from './styles';
const MDXButton = ({
variant = 'text',
@@ -15,7 +15,7 @@ const MDXButton = ({
const { mode } = useContext(ThemeContext);
return link ? (
<Btn
<StyledLink
href={link}
target={target}
variant={variant}
@@ -25,11 +25,11 @@ const MDXButton = ({
className={className}
>
{children}
</Btn>
</StyledLink>
) : (
<Btn href="#" variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
<StyledButton variant={variant} type={type} mode={mode} disabled={disabled} className={className}>
{children}
</Btn>
</StyledButton>
);
};
components/MDXButton/styles.tsx
+11 -6
View File
@@ -1,13 +1,12 @@
import Link from 'next/link';
import styled from 'styled-components';
import styled, { css } from 'styled-components';
import { Props } from './types';
export const Btn = styled(Link)<Props>`
export const sharedStyles = css<Props>`
cursor: pointer;
display: ${({ variant }) =>
['action', 'outline'].includes(variant as string) ? 'block' : 'inline'};
width: ${({ variant }) => (['action', 'outline'].includes(variant as string) ? '100%' : 'auto')};
/* TODO: fix theme blue color problem */
background: ${({ variant }) => (variant === 'action' ? '#1573CA' : 'none')};
color: ${({ variant, mode }) =>
variant === 'action' ? 'white' : mode === 'dark' ? 'white' : 'black'};
@@ -25,9 +24,7 @@ export const Btn = styled(Link)<Props>`
text-decoration: none;
transition: color 250ms ease-in-out;
${({ disabled }) =>
disabled &&
`
${({ disabled }) => disabled && `
background: gray;
cursor: default;
`}
@@ -37,3 +34,11 @@ export const Btn = styled(Link)<Props>`
['action', 'outline'].includes(variant as string) ? '.5rem .75rem' : '0rem'};
}
`;
export const StyledLink = styled(Link)<Props>`
${sharedStyles}
`;
export const StyledButton = styled.button<Omit<Props, 'href'>>`
${sharedStyles}
`;
components/MobileNav/index.tsx
+3 -3
View File
@@ -1,11 +1,11 @@
import { FC, useContext, useRef, useEffect } from 'react';
import { useContext, useRef, useEffect } from 'react';
import { ThemeContext } from '../../styles/theme';
import { Props } from './types';
import { Bar } from './styles';
import IconButton from '../IconButton';
import Button from '../Button';
const MobileNav: FC<Props> = ({ open, close }) => {
const MobileNav = ({ open, close }: Props) => {
const { mode, toggle } = useContext(ThemeContext);
const ref = useRef<HTMLDivElement>(null);
@@ -45,7 +45,7 @@ const MobileNav: FC<Props> = ({ open, close }) => {
close();
}}
>
{mode === 'dark' ? 'Light Mode' : 'Dark Mode'}
{mode === 'dark' ? 'Switch to Light Mode' : 'Switch to Dark Mode'}
</Button>
</div>
<div className='mobile-button-wrapper'>
components/Nav/index.tsx
+3 -3
View File
@@ -1,4 +1,4 @@
import { FC, useContext, useState } from 'react';
import { useContext, useState } from 'react';
import { ThemeContext } from '../../styles/theme';
import { Bar } from './styles';
import Link from 'next/link';
@@ -7,7 +7,7 @@ import Button from '../Button';
import IconButton from '../IconButton';
import MobileNav from '../MobileNav';
const Nav: FC = () => {
const Nav = () => {
const [mobileNavOpen, setMobileNavOpen] = useState<boolean>(false);
const { mode, toggle } = useContext(ThemeContext);
@@ -41,7 +41,7 @@ const Nav: FC = () => {
Resume
</Button>
<IconButton
alt='Theme toggler'
alt='Hamburger menu'
icon={mode === 'dark' ? '/icons/light-menu.svg' : '/icons/dark-menu.svg'}
onClick={() => setMobileNavOpen(true)}
/>