src/shared/components/sponsors.tsx

   1 import { Component } from 'inferno';
   2 import { Helmet } from 'inferno-helmet';
   3 import { Site } from 'lemmy-js-client';
   4 import { i18n } from '../i18next';
   5 import { T } from 'inferno-i18next';
   6 import { repoUrl, isBrowser } from '../utils';
   7 import { IsoData } from 'shared/interfaces';
   8
   9 interface SilverUser {
  10   name: string;
  11   link?: string;
  12 }
  13
  14 let general = [
  15   'Brendan',
  16   'mexicanhalloween',
  17   'William Moore',
  18   'Rachel Schmitz',
  19   'comradeda',
  20   'ybaumy',
  21   'dude in phx',
  22   'twilight loki',
  23   'Andrew Plaza',
  24   'Jonathan Cremin',
  25   'Arthur Nieuwland',
  26   'Ernest Wiśniewski',
  27   'HN',
  28   'Forrest Weghorst',
  29   'Andre Vallestero',
  30   'NotTooHighToHack',
  31 ];
  32 let highlighted = ['DQW', 'DiscountFuneral', 'Oskenso Kashi', 'Alex Benishek'];
  33 let silver: SilverUser[] = [
  34   {
  35     name: 'Redjoker',
  36     link: 'https://iww.org',
  37   },
  38 ];
  39 // let gold = [];
  40 // let latinum = [];
  41
  42 interface SponsorsState {
  43   site: Site;
  44 }
  45
  46 export class Sponsors extends Component<any, SponsorsState> {
  47   private emptyState: SponsorsState = {
  48     site: undefined,
  49   };
  50   constructor(props: any, context: any) {
  51     super(props, context);
  52     this.state = this.emptyState;
  53
  54     let isoData: IsoData;
  55     if (isBrowser()) {
  56       isoData = window.isoData;
  57     } else {
  58       isoData = this.context.router.staticContext;
  59     }
  60
  61     this.state.site = isoData.site.site;
  62   }
  63
  64   componentDidMount() {
  65     if (isBrowser()) {
  66       window.scrollTo(0, 0);
  67     }
  68   }
  69
  70   get documentTitle(): string {
  71     if (this.state.site) {
  72       return `${i18n.t('sponsors')} - ${this.state.site.name}`;
  73     } else {
  74       return 'Lemmy';
  75     }
  76   }
  77
  78   render() {
  79     return (
  80       <div class="container text-center">
  81         <Helmet title={this.documentTitle} />
  82         {this.topMessage()}
  83         <hr />
  84         {this.sponsors()}
  85         <hr />
  86         {this.bitcoin()}
  87       </div>
  88     );
  89   }
  90
  91   topMessage() {
  92     return (
  93       <div>
  94         <h5>{i18n.t('donate_to_lemmy')}</h5>
  95         <p>
  96           {/* TODO
  97           <T i18nKey="sponsor_message">
  98             #<a href={repoUrl}>#</a>
  99           </T>
 100           */}
 101         </p>
 102         <a class="btn btn-secondary" href="https://liberapay.com/Lemmy/">
 103           {i18n.t('support_on_liberapay')}
 104         </a>
 105         <a
 106           class="btn btn-secondary ml-2"
 107           href="https://www.patreon.com/dessalines"
 108         >
 109           {i18n.t('support_on_patreon')}
 110         </a>
 111         <a
 112           class="btn btn-secondary ml-2"
 113           href="https://opencollective.com/lemmy"
 114         >
 115           {i18n.t('support_on_open_collective')}
 116         </a>
 117       </div>
 118     );
 119   }
 120   sponsors() {
 121     return (
 122       <div class="container">
 123         <h5>{i18n.t('sponsors')}</h5>
 124         <p>{i18n.t('silver_sponsors')}</p>
 125         <div class="row justify-content-md-center card-columns">
 126           {silver.map(s => (
 127             <div class="card col-12 col-md-2">
 128               <div>
 129                 {s.link ? (
 130                   <a href={s.link} target="_blank" rel="noopener">
 131                     💎 {s.name}
 132                   </a>
 133                 ) : (
 134                   <div>💎 {s.name}</div>
 135                 )}
 136               </div>
 137             </div>
 138           ))}
 139         </div>
 140         <p>{i18n.t('general_sponsors')}</p>
 141         <div class="row justify-content-md-center card-columns">
 142           {highlighted.map(s => (
 143             <div class="card bg-primary col-12 col-md-2 font-weight-bold">
 144               <div>{s}</div>
 145             </div>
 146           ))}
 147           {general.map(s => (
 148             <div class="card col-12 col-md-2">
 149               <div>{s}</div>
 150             </div>
 151           ))}
 152         </div>
 153       </div>
 154     );
 155   }
 156
 157   bitcoin() {
 158     return (
 159       <div>
 160         <h5>{i18n.t('crypto')}</h5>
 161         <div class="table-responsive">
 162           <table class="table table-hover text-center">
 163             <tbody>
 164               <tr>
 165                 <td>{i18n.t('bitcoin')}</td>
 166                 <td>
 167                   <code>1Hefs7miXS5ff5Ck5xvmjKjXf5242KzRtK</code>
 168                 </td>
 169               </tr>
 170               <tr>
 171                 <td>{i18n.t('ethereum')}</td>
 172                 <td>
 173                   <code>0x400c96c96acbC6E7B3B43B1dc1BB446540a88A01</code>
 174                 </td>
 175               </tr>
 176               <tr>
 177                 <td>{i18n.t('monero')}</td>
 178                 <td>
 179                   <code>
 180                     41taVyY6e1xApqKyMVDRVxJ76sPkfZhALLTjRvVKpaAh2pBd4wv9RgYj1tSPrx8wc6iE1uWUfjtQdTmTy2FGMeChGVKPQuV
 181                   </code>
 182                 </td>
 183               </tr>
 184             </tbody>
 185           </table>
 186         </div>
 187       </div>
 188     );
 189   }
 190 }