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