diff options
author | Brandon Millman <brandon.millman@gmail.com> | 2018-06-27 06:01:11 +0800 |
---|---|---|
committer | Brandon Millman <brandon.millman@gmail.com> | 2018-06-29 02:50:08 +0800 |
commit | 6a39a69afeed7b0737cff70b4d3314e668b67308 (patch) | |
tree | 9453689f86e33ba04347833a96f7b2f520e9891c /packages/website/ts/components/ui | |
parent | 2474d1d2f4cf4ae81d5d67c53005f018a0154ef5 (diff) | |
download | dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.gz dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.bz2 dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.lz dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.xz dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.tar.zst dexon-0x-contracts-6a39a69afeed7b0737cff70b4d3314e668b67308.zip |
Added Circle component
Diffstat (limited to 'packages/website/ts/components/ui')
-rw-r--r-- | packages/website/ts/components/ui/circle.tsx | 16 | ||||
-rw-r--r-- | packages/website/ts/components/ui/identicon.tsx | 5 |
2 files changed, 18 insertions, 3 deletions
diff --git a/packages/website/ts/components/ui/circle.tsx b/packages/website/ts/components/ui/circle.tsx new file mode 100644 index 000000000..75103d066 --- /dev/null +++ b/packages/website/ts/components/ui/circle.tsx @@ -0,0 +1,16 @@ +import * as React from 'react'; + +export interface CircleProps { + className?: string; + diameter: number; + fillColor: string; +} + +export const Circle: React.StatelessComponent<CircleProps> = ({ className, diameter, fillColor }) => { + const radius = diameter / 2; + return ( + <svg className={className} height={diameter} width={diameter}> + <circle cx={radius} cy={radius} r={radius} fill={fillColor} /> + </svg> + ); +}; diff --git a/packages/website/ts/components/ui/identicon.tsx b/packages/website/ts/components/ui/identicon.tsx index cc1655962..d8036f0c1 100644 --- a/packages/website/ts/components/ui/identicon.tsx +++ b/packages/website/ts/components/ui/identicon.tsx @@ -2,6 +2,7 @@ import blockies = require('blockies'); import * as _ from 'lodash'; import * as React from 'react'; +import { Circle } from 'ts/components/ui/circle'; import { Image } from 'ts/components/ui/image'; import { colors } from 'ts/style/colors'; @@ -40,9 +41,7 @@ export class Identicon extends React.Component<IdenticonProps, IdenticonState> { width={diameter} /> ) : ( - <svg height={diameter} width={diameter}> - <circle cx={radius} cy={radius} r={radius} fill={colors.grey200} /> - </svg> + <Circle diameter={diameter} fillColor={colors.grey200} /> )} </div> ); |