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

Update link component

Browse Source
This commit is contained in:
Hazem Krimi
2021-05-06 01:43:53 +01:00
parent b53a1e82ae
commit a872cfa98f
2 changed files with 55 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Link/index.tsx
+9 -2
View File
@@ -15,14 +15,21 @@ type LinkProps = {
| 'black'
| 'white'
| string;
selected?: boolean;
className?: string;
iconLeft?: React.SVGProps<SVGSVGElement>;
onClick?: () => void;
};
const Link = ({ href, children, iconLeft, ...props }: LinkProps) => {
const Link = ({
href,
children,
iconLeft,
selected = false,
...props
}: LinkProps) => {
return (
<Wrapper {...props}>
<Wrapper {...props} selected={selected}>
<RouterLink to={href}>
{iconLeft && <span className='icon left'>{iconLeft}</span>}
{children}
src/components/Link/styles.ts
+46 -1
View File
@@ -12,6 +12,7 @@ type WrapperProps = {
| 'black'
| 'white'
| string;
selected: boolean;
iconLeft?: React.SVGProps<SVGSVGElement>;
};
@@ -19,7 +20,7 @@ export const Wrapper = styled.div<WrapperProps>`
display: inline;
a {
text-decoration: none;
text-decoration: ${({ selected }) => (selected ? 'underline' : 'none')};
&:hover {
text-decoration: underline;
@@ -31,6 +32,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: #3e66fb;
a {
color: #3e66fb;
}
.icon svg path {
stroke: #3e66fb;
}
@@ -44,6 +49,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.client.main};
a {
color: ${theme.colors.client.main};
}
.icon svg path {
stroke: ${theme.colors.client.main};
}
@@ -56,6 +65,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.productOwner.main};
a {
color: ${theme.colors.productOwner.main};
}
.icon svg path {
stroke: ${theme.colors.productOwner.main};
}
@@ -68,6 +81,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.developer.main};
a {
color: ${theme.colors.developer.main};
}
.icon svg path {
stroke: ${theme.colors.developer.main};
}
@@ -80,6 +97,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.admin.main};
a {
color: ${theme.colors.admin.main};
}
.icon svg path {
stroke: ${theme.colors.admin.main};
}
@@ -92,6 +113,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.success.main};
a {
color: ${theme.colors.success.main};
}
.icon svg path {
stroke: ${theme.colors.success.main};
}
@@ -104,6 +129,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.warning.main};
a {
color: ${theme.colors.warning.main};
}
.icon svg path {
stroke: ${theme.colors.warning.main};
}
@@ -116,6 +145,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.error.main};
a {
color: ${theme.colors.error.main};
}
.icon svg path {
stroke: ${theme.colors.error.main};
}
@@ -128,6 +161,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.black.main};
a {
color: ${theme.colors.black.main};
}
.icon svg path {
stroke: ${theme.colors.black.main};
}
@@ -140,6 +177,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${theme.colors.white.main};
a {
color: ${theme.colors.white.main};
}
.icon svg path {
stroke: ${theme.colors.white.main};
}
@@ -152,6 +193,10 @@ export const Wrapper = styled.div<WrapperProps>`
return css`
color: ${color};
a {
color: ${color};
}
.icon svg path {
stroke: ${color};
}