forked/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2026-04-19 21:16:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

Added some feedback to know which cardsin overview pages are clickable

Browse Source
This commit is contained in:
Alejandro Celaya
2022-02-05 10:46:46 +01:00
parent e0d43020dc
commit 60929342fb
3 changed files with 16 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/servers/helpers/HighlightCard.scss
View File

@@ -7,6 +7,13 @@
text-decoration: none;
}
.highlight-card__link-icon {
position: absolute;
right: 5px;
bottom: 5px;
opacity: 0.1;
}
.highlight-card__title {
text-transform: uppercase;
color: $textPlaceholder;

7
src/servers/helpers/HighlightCard.tsx
View File

@@ -1,6 +1,8 @@
import { FC } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom';
import { faLink as linkIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './HighlightCard.scss';
export interface HighlightCardProps {
@@ -8,8 +10,11 @@ export interface HighlightCardProps {
link?: string;
}
const buildExtraProps = (link?: string) => !link ? {} : { tag: Link, to: link };
export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => (
<Card className="highlight-card" body {...(link && { tag: Link, to: link })}>
<Card className="highlight-card" body {...buildExtraProps(link)}>
{link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
<CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
<CardText tag="h2">{children}</CardText>
</Card>