crimson-quirks/crimson-quirks-ui
1
0
Fork 0
mirror of https://github.com/hazemKrimi/crimson-quirks-ui.git synced 2026-05-01 18:20:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

Clear git cache

Browse Source
This commit is contained in:
Hazem Krimi
2023-05-28 16:43:53 +01:00
parent bd462d7fb7
commit 2a71d7927c
179 changed files with 0 additions and 29069 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Link/index.tsx
-52
View File
@@ -1,52 +0,0 @@
import { Link as RouterLink } from 'react-router-dom';
import { Wrapper } from './styles';
type LinkProps = {
href?: string;
url?: boolean;
children?: React.ReactNode | JSX.Element | string;
color?:
| 'client'
| 'productOwner'
| 'developer'
| 'admin'
| 'success'
| 'warning'
| 'error'
| 'black'
| 'white'
| string;
selected?: boolean;
className?: string;
iconLeft?: React.FunctionComponentElement<React.SVGProps<SVGSVGElement>>;
onClick?: () => void;
target?: '_self' | '_blank';
};
const Link = ({
href,
url = false,
children,
iconLeft,
selected = false,
target = '_self',
...props
}: LinkProps) => {
return (
<Wrapper {...props} selected={selected}>
{href && !url ? (
<RouterLink to={href} target={target}>
{iconLeft && <span className='icon left'>{iconLeft}</span>}
{children}
</RouterLink>
) : (
<a href={href} target={target}>
{iconLeft && <span className='icon left'>{iconLeft}</span>}
{children}
</a>
)}
</Wrapper>
);
};
export default Link;
src/components/Link/styles.ts
-230
View File
@@ -1,230 +0,0 @@
import styled, { css } from 'styled-components';
type WrapperProps = {
color?:
| 'client'
| 'productOwner'
| 'developer'
| 'admin'
| 'success'
| 'warning'
| 'error'
| 'black'
| 'white'
| string;
selected: boolean;
iconLeft?: React.SVGProps<SVGSVGElement>;
};
export const Wrapper = styled.div<WrapperProps>`
display: inline;
a {
text-decoration: ${({ selected }) => (selected ? 'underline' : 'none')};
&:hover {
text-decoration: underline;
}
}
${({ color, theme }) => {
if (!color)
return css`
color: #3e66fb;
a {
color: #3e66fb;
}
.icon svg path {
stroke: #3e66fb;
}
a:visited {
color: #3e66fb;
}
`;
switch (color) {
case 'client':
return css`
color: ${theme.colors.client.main};
a {
color: ${theme.colors.client.main};
}
.icon svg path {
stroke: ${theme.colors.client.main};
}
a:visited {
color: ${theme.colors.client.main};
}
`;
case 'productOwner':
return css`
color: ${theme.colors.productOwner.main};
a {
color: ${theme.colors.productOwner.main};
}
.icon svg path {
stroke: ${theme.colors.productOwner.main};
}
a:visited {
color: ${theme.colors.productOwner.main};
}
`;
case 'developer':
return css`
color: ${theme.colors.developer.main};
a {
color: ${theme.colors.developer.main};
}
.icon svg path {
stroke: ${theme.colors.developer.main};
}
a:visited {
color: ${theme.colors.developer.main};
}
`;
case 'admin':
return css`
color: ${theme.colors.admin.main};
a {
color: ${theme.colors.admin.main};
}
.icon svg path {
stroke: ${theme.colors.admin.main};
}
a:visited {
color: ${theme.colors.admin.main};
}
`;
case 'success':
return css`
color: ${theme.colors.success.main};
a {
color: ${theme.colors.success.main};
}
.icon svg path {
stroke: ${theme.colors.success.main};
}
a:visited {
color: ${theme.colors.success.main};
}
`;
case 'warning':
return css`
color: ${theme.colors.warning.main};
a {
color: ${theme.colors.warning.main};
}
.icon svg path {
stroke: ${theme.colors.warning.main};
}
a:visited {
color: ${theme.colors.warning.main};
}
`;
case 'error':
return css`
color: ${theme.colors.error.main};
a {
color: ${theme.colors.error.main};
}
.icon svg path {
stroke: ${theme.colors.error.main};
}
a:visited {
color: ${theme.colors.error.main};
}
`;
case 'black':
return css`
color: ${theme.colors.black.main};
a {
color: ${theme.colors.black.main};
}
.icon svg path {
stroke: ${theme.colors.black.main};
}
a:visited {
color: ${theme.colors.black.main};
}
`;
case 'white':
return css`
color: ${theme.colors.white.main};
a {
color: ${theme.colors.white.main};
}
.icon svg path {
stroke: ${theme.colors.white.main};
}
a:visited {
color: ${theme.colors.white.main};
}
`;
default:
return css`
color: ${color};
a {
color: ${color};
}
.icon svg path {
stroke: ${color};
}
a:visited {
color: ${color};
}
`;
}
}}
${({ iconLeft }) => {
if (iconLeft)
return css`
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
`;
return '';
}}
.icon {
display: inline-flex;
align-items: center;
}
.icon.left {
margin-right: 5px;
}
`;