ui/src/components/sponsors.tsx

   1 import { Component } from 'inferno';
   2 import { WebSocketService } from '../services';
   3 import { i18n } from '../i18next';
   4 import { T } from 'inferno-i18next';
   5 import { repoUrl } from '../utils';
   6
   7 interface SilverUser {
   8   name: string;
   9   link: string;
  10 }
  11
  12 let general = [
  13   'Ernest Wiśniewski',
  14   'HN',
  15   'Forrest Weghorst',
  16   'Andre Vallestero',
  17   'NotTooHighToHack',
  18 ];
  19 let highlighted = ['Oskenso Kashi', 'Alex Benishek'];
  20 let silver: Array<SilverUser> = [
  21   {
  22     name: 'Redjoker',
  23     link: 'https://iww.org',
  24   },
  25 ];
  26 // let gold = [];
  27 // let latinum = [];
  28
  29 export class Sponsors extends Component<any, any> {
  30   constructor(props: any, context: any) {
  31     super(props, context);
  32   }
  33
  34   componentDidMount() {
  35     document.title = `${i18n.t('sponsors')} - ${
  36       WebSocketService.Instance.site.name
  37     }`;
  38     window.scrollTo(0, 0);
  39   }
  40
  41   render() {
  42     return (
  43       <div class="container text-center">
  44         {this.topMessage()}
  45         <hr />
  46         {this.sponsors()}
  47         <hr />
  48         {this.bitcoin()}
  49       </div>
  50     );
  51   }
  52
  53   topMessage() {
  54     return (
  55       <div>
  56         <h5>{i18n.t('donate_to_lemmy')}</h5>
  57         <p>
  58           <T i18nKey="sponsor_message">
  59             #<a href={repoUrl}>#</a>
  60           </T>
  61         </p>
  62         <a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
  63           {i18n.t('support_on_liberapay')}
  64         </a>
  65         <a
  66           class="btn btn-secondary ml-2"
  67           href="https://www.patreon.com/dessalines"
  68         >
  69           {i18n.t('support_on_patreon')}
  70         </a>
  71         <a
  72           class="btn btn-secondary ml-2"
  73           href="https://opencollective.com/lemmy"
  74         >
  75           {i18n.t('support_on_open_collective')}
  76         </a>
  77       </div>
  78     );
  79   }
  80   sponsors() {
  81     return (
  82       <div class="container">
  83         <h5>{i18n.t('sponsors')}</h5>
  84         <p>{i18n.t('silver_sponsors')}</p>
  85         <div class="row card-columns">
  86           {silver.map(s => (
  87             <div class="card col-12 col-md-2">
  88               <div>
  89                 <a href={s.link} target="_blank">
  90                   💎 {s.name}
  91                 </a>
  92               </div>
  93             </div>
  94           ))}
  95         </div>
  96         <p>{i18n.t('general_sponsors')}</p>
  97         <div class="row card-columns">
  98           {highlighted.map(s => (
  99             <div class="card bg-primary col-12 col-md-2 font-weight-bold">
 100               <div>{s}</div>
 101             </div>
 102           ))}
 103           {general.map(s => (
 104             <div class="card col-12 col-md-2">
 105               <div>{s}</div>
 106             </div>
 107           ))}
 108         </div>
 109       </div>
 110     );
 111   }
 112
 113   bitcoin() {
 114     return (
 115       <div>
 116         <h5>{i18n.t('crypto')}</h5>
 117         <div class="table-responsive">
 118           <table class="table table-hover text-center">
 119             <tbody>
 120               <tr>
 121                 <td>{i18n.t('bitcoin')}</td>
 122                 <td>
 123                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
 124                 </td>
 125               </tr>
 126               <tr>
 127                 <td>{i18n.t('ethereum')}</td>
 128                 <td>
 129                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
 130                 </td>
 131               </tr>
 132               <tr>
 133                 <td>{i18n.t('monero')}</td>
 134                 <td>
 135                   <code>
 136                     41taVyY6e1xApqKyMVDRVxJ76sPkfZhALLTjRvVKpaAh2pBd4wv9RgYj1tSPrx8wc6iE1uWUfjtQdTmTy2FGMeChGVKPQuV
 137                   </code>
 138                 </td>
 139               </tr>
 140             </tbody>
 141           </table>
 142         </div>
 143       </div>
 144     );
 145   }
 146 }