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

Add prettier configuration

Browse Source
This commit is contained in:
Hazem Krimi
2023-07-01 00:38:49 +01:00
parent de22cafb12
commit 5e01140d6e
57 changed files with 1896 additions and 1718 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Button/index.tsx
+15 -9
View File
@@ -2,16 +2,22 @@ import { Props } from './types';
import { StyledButton } from './styles';
const Button = ({
variant = 'text',
href,
target,
onClick,
children,
className
variant = 'text',
href,
target,
onClick,
children,
className,
}: Props) => (
<StyledButton href={href} target={target} className={className} onClick={onClick} variant={variant}>
{children}
</StyledButton>
<StyledButton
href={href}
target={target}
className={className}
onClick={onClick}
variant={variant}
>
{children}
</StyledButton>
);
export default Button;
components/Button/styles.tsx
+41 -37
View File
@@ -3,45 +3,49 @@ import Link from 'next/link';
import { Props } from './types';
export const StyledButton = styled(Link)<Props>`
position: relative;
display: inline;
cursor: pointer;
background: none;
color: var(--text);
border: ${({ variant }) =>
variant === 'outline' ? '2px solid var(--text)' : '2px solid transparent'};
font-weight: bold;
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, border 250ms ease-in-out;
z-index: 1;
position: relative;
display: inline;
cursor: pointer;
background: none;
color: var(--text);
border: ${({ variant }) =>
variant === 'outline' ? '2px solid var(--text)' : '2px solid transparent'};
font-weight: bold;
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, border 250ms ease-in-out;
z-index: 1;
@media (max-width: 768px) {
padding: ${({ variant }) => (variant === 'outline' ? '.5rem .75rem' : '0rem')};
}
@media (max-width: 768px) {
padding: ${({ variant }) =>
variant === 'outline' ? '.5rem .75rem' : '0rem'};
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: ${({ variant }) => (variant === 'outline' ? 'var(--text)' : 'inherit')};
transition: transform 250ms ease-in-out;
transform: scaleX(0);
transform-origin: left;
}
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -1;
background-color: ${({ variant }) =>
variant === 'outline' ? 'var(--text)' : 'inherit'};
transition: transform 250ms ease-in-out;
transform: scaleX(0);
transform-origin: left;
}
&:hover {
color: ${({ variant }) => (variant === 'outline' ? 'var(--background)' : 'inherit')};
border: 2px solid transparent;
}
&:hover {
color: ${({ variant }) =>
variant === 'outline' ? 'var(--background)' : 'inherit'};
border: 2px solid transparent;
}
&:hover::before {
transform: scaleX(1);
}
&:hover::before {
transform: scaleX(1);
}
`;
components/Button/types.ts
+6 -6
View File
@@ -1,8 +1,8 @@
export type Props = {
variant?: 'outline' | 'text';
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
children: React.ReactNode;
className?: string;
variant?: 'outline' | 'text';
href: string;
target?: HTMLAnchorElement['target'];
onClick?: () => void;
children: React.ReactNode;
className?: string;
};