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