diff --git a/src/assets/proxy/shadowsocks.svg b/src/assets/proxy/shadowsocks.svg new file mode 100644 index 0000000..774fcca --- /dev/null +++ b/src/assets/proxy/shadowsocks.svg @@ -0,0 +1,11 @@ + + + + icon-Shadowsocks + Created with Sketch. + + + + + + \ No newline at end of file diff --git a/src/assets/proxy/vmess.svg b/src/assets/proxy/vmess.svg new file mode 100644 index 0000000..9d71905 --- /dev/null +++ b/src/assets/proxy/vmess.svg @@ -0,0 +1,30 @@ + + + + icon-Vmess + Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/src/components/Proxy/index.tsx b/src/components/Proxy/index.tsx new file mode 100644 index 0000000..92ad7a4 --- /dev/null +++ b/src/components/Proxy/index.tsx @@ -0,0 +1,28 @@ +import * as React from 'react' +import { BaseComponentProps, ProxyType } from '@models' +import classnames from 'classnames' + +import './style.scss' +const shadowsocks = require('@assets/proxy/shadowsocks.svg') +const vmess = require('@assets/proxy/vmess.svg') +const iconMapping = { + [ProxyType.Shadowsocks]: shadowsocks, + [ProxyType.Shadowsocks]: shadowsocks, + [ProxyType.Vmess]: vmess +} + +interface ProxyProps extends BaseComponentProps { + type: ProxyType + name: string +} + +export const Proxy: React.SFC = props => { + const { type, name, className } = props + const icon = iconMapping[type] + return ( +
+ + { name } +
+ ) +} diff --git a/src/components/Proxy/style.scss b/src/components/Proxy/style.scss new file mode 100644 index 0000000..c6db32c --- /dev/null +++ b/src/components/Proxy/style.scss @@ -0,0 +1,27 @@ +@import '~@styles/variables'; + +.proxy { + display: flex; + flex-direction: column; + align-items: center; + height: 80px; + width: 80px; + box-shadow: 0 0 20px rgba($color-primary-dark, 0.2); + border-radius: 4px; +} + +.proxy-icon { + margin-top: 12px; + height: 40px; + width: 40px; +} + +.proxy-name { + width: 80%; + margin-top: 6px; + color: $color-primary-dark; + font-size: 10px; + text-overflow: ellipsis; + overflow: hidden; + text-align: center; +} diff --git a/src/components/index.ts b/src/components/index.ts index 3da6434..a6d28f8 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,2 +1,3 @@ export * from './Header' export * from './Icon' +export * from './Proxy' diff --git a/src/containers/Proxies/index.tsx b/src/containers/Proxies/index.tsx index b859bf5..f11036a 100644 --- a/src/containers/Proxies/index.tsx +++ b/src/containers/Proxies/index.tsx @@ -1,12 +1,30 @@ import * as React from 'react' -import { Header, Icon } from '@components' +import { Header, Icon, Proxy } from '@components' +import { ProxyType } from '@models' +import './style.scss' export default class Proxies extends React.Component<{}, {}> { render () { - return
+ const proxies: { type: ProxyType, name: string }[] = [ + { type: ProxyType.Shadowsocks, name: 'shadowsocks' }, + { type: ProxyType.Vmess, name: 'vmess' } + ] + + return
+
    + { + proxies.map( + proxy => ( +
  • + +
    • + ) + ) + } +
} } diff --git a/src/containers/Proxies/style.scss b/src/containers/Proxies/style.scss index c764641..29ee007 100644 --- a/src/containers/Proxies/style.scss +++ b/src/containers/Proxies/style.scss @@ -1 +1,15 @@ @import '~@styles/variables'; + +.proxies-container { + margin-top: 20px; +} + +.proxies-list { + display: flex; + flex-wrap: wrap; + list-style: none; + + li { + margin: 20px 15px 0 0; + } +} diff --git a/src/models/Proxy.ts b/src/models/Proxy.ts index 3b38659..958c4dc 100644 --- a/src/models/Proxy.ts +++ b/src/models/Proxy.ts @@ -1,6 +1,13 @@ /** * proxy config interface */ + +export enum ProxyType { + Shadowsocks = 'Shadowsocks', + Vmess = 'Vmess', + Socks5 = 'Socks5' +} + export interface Proxy { /** diff --git a/src/views/App.scss b/src/views/App.scss index 7a9c625..21ec1f1 100644 --- a/src/views/App.scss +++ b/src/views/App.scss @@ -1 +1,5 @@ @import '~@styles/common'; + +.page-container { + width: 545px; +}