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/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>
);
};