Added "Open in new tab" icon
This commit is contained in:
parent
94223fd80c
commit
e5dd399a07
2 changed files with 15 additions and 1 deletions
|
@ -16,6 +16,7 @@ const Card = styled.div`
|
|||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 30rem;
|
||||
max-width: 90%;
|
||||
min-height: 10rem;
|
||||
max-height: 15rem;
|
||||
margin-bottom: 2rem;
|
||||
|
@ -58,6 +59,16 @@ const CardTitleIcon = styled.div`
|
|||
height: 1.5rem;
|
||||
`;
|
||||
|
||||
const OpenInNewTab = styled.div`
|
||||
filter: invert();
|
||||
position: relative;
|
||||
object-fit: contain;
|
||||
margin: 0.3rem;
|
||||
margin-left: 0.5rem;
|
||||
aspect-ratio: 1;
|
||||
height: 1.2rem;
|
||||
`
|
||||
|
||||
const CardTitleIconMirror = styled.div`
|
||||
height: 1.5rem;
|
||||
aspect-ratio: 1;
|
||||
|
@ -155,7 +166,9 @@ const CardTitle = ({ content, href }: { content: Service, href: string }) => {
|
|||
<CardTitleText>{content.name}</CardTitleText>
|
||||
{
|
||||
content.icon ? (
|
||||
<CardTitleIconMirror />
|
||||
<OpenInNewTab>
|
||||
<Image alt="open" src={"/icons/open-new-window.svg"} fill />
|
||||
</OpenInNewTab>
|
||||
) : (<></>)
|
||||
}
|
||||
</CardTitleLink>
|
||||
|
|
1
public/icons/open-new-window.svg
Normal file
1
public/icons/open-new-window.svg
Normal file
|
@ -0,0 +1 @@
|
|||
<?xml version="1.0" encoding="UTF-8"?><svg width="24px" height="24px" viewBox="0 0 24 24" stroke-width="1.5" fill="none" xmlns="http://www.w3.org/2000/svg" color="#000000"><path d="M21 3h-6m6 0l-9 9m9-9v6" stroke="#000000" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path><path d="M21 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h6" stroke="#000000" stroke-width="1.5" stroke-linecap="round"></path></svg>
|
After Width: | Height: | Size: 431 B |
Loading…
Reference in a new issue