react#VFC TypeScript Examples

App: VFC<Props> = (props) => {
  return (
    <header
      className={classNames(
        styles['header-1'],
        { [styles.active]: props.active },
        styles.row
      )}
    >
      vite-plugin-sass-dts-example
    </header>
  )
}

DocumentFooter: VFC = () => (
  <section className="footer-section">
    <div className="inner-block">
      <div className="contact-block" id="contacts">
        <h2>Contact us</h2>
        <div className="row">
          <a href="tel:1-978-235-0880">1-978-235-0880</a>
          <a href="mailto:[email protected]">[email protected]</a>
        </div>
      </div>

      <a href="#" className="logo">
        <img src={Logo} alt="logo" />
      </a>
      <div className="copyrights">2022. All rights reserved.</div>
    </div>
  </section>
)

App: VFC = () => (
  <div className="App">
    <header className="App-header">
      <img src={logo} className="App-logo" alt="logo" />
      <p>
        Edit <code>src/App.tsx</code> and save to reload.
      </p>
      <a
        className="App-link"
        href="https://reactjs.org"
        target="_blank"
        rel="noopener noreferrer"
      >
        Learn React
      </a>
    </header>
  </div>
)

Card: VFC<Props> = ({ data }) => {
  if (data === undefined) {
    throw new Error("should be");
  }
  const { title, tags, visual, path, created } = data;
  if (
    path === undefined ||
    tags === undefined ||
    title === undefined ||
    visual === undefined ||
    created === undefined
  ) {
    throw new Error("should be");
  }
  // TODO: as 消したい
  const image = getImage(visual as ImageDataLike);
  if (image === undefined) {
    throw new Error("aa");
  }
  return (
    <Link key={path} to={`${path}/`} className={link}>
      <div className={card}>
        <GatsbyImage image={image} alt="thumbnail" className={imageWrapper} />
        <p>
          <time dateTime={created}>{created}</time>
        </p>
        <p>{title}</p>
      </div>
    </Link>
  );
}

MultipleLabelledComponent: VFC = () => {
  const id = 'foo'
  const { labelProps: firstLabelProps, fieldProps: firstLabelInputProps } = useLabel({ id })
  const { labelProps: secondLabelProps, fieldProps: secondLabelInputProps } = useLabel({
    id,
    behavior: 'label',
  })

  return (
    <div>
      <span {...firstLabelProps}>First label,&nbsp;</span>
      <label {...secondLabelProps} style={{ marginRight: '1em' }}>
        second label
      </label>
      <input
        type="text"
        name="input"
        {...mergeProps(firstLabelInputProps, secondLabelInputProps)}
      />
    </div>
  )
}

SubMenu: VFC<{ itemsTop: MenuItemType[], itemsBottom: MenuItemType[] }> = ({ itemsTop, itemsBottom }) => (
  <>
    <Menu items={itemsTop} mode="vertical" wrapperClass={style.subMenu} />
    <Divider className={style.subMenuDivider} />
    <Menu items={itemsBottom} mode="vertical" wrapperClass={style.subMenu} />
  </>
)

ProgressBar: VFC<Props> = ({ status }) => (
  <div className={status !== PROGRESS_BAR_STATUSES.COMPLETED ? 'progress-bar' : 'progress-bar green'}>
    {status === PROGRESS_BAR_STATUSES.START && <div className="progress-bar__indicator" />}
  </div>
)

App: VFC = () => {
  const characters: Character[] = [
    {
      id: 1,
      name: '桜木花道',
      grade: 1,
      height: 189.2,
    },
    {
      id: 2,
      name: '流川 楓',
      grade: 1,
      height: 187,
    },
    {
      id: 3,
      name: '宮城リョータ',
      grade: 2,
      height: 168,
    },
    {
      id: 4,
      name: '三井 寿',
      grade: 3,
    },
    {
      id: 5,
      name: '赤木剛憲',
      grade: 3,
      height: 197,
    },
  ];

  return (
    <div className="container">
      <header>
        <h1>『SLAM DUNK』登場人物</h1>
      </header>
      <CharacterList school="湘北高校" characters={characters} />
    </div>
  );
}

ArticleBody: VFC<Props> = ({ html }) => {
  return <div className={body} dangerouslySetInnerHTML={{ __html: html }} />;
}

PrivacyPolicy: VFC = () => (
  <div className="document">
    <h2 className="document__title">Privacy Policy</h2>
    <div className="document--last-modified">
      <span>Version 1.0</span>
      <span>Last modified: 2021/09/07</span>
    </div>
    <div className="document--list">
      <div>
        <h4 className="document--list__title">1. Introduction</h4>
        <p className="document--list__text">
          This Privacy Policy explains how GEAR (“GEAR” or “we”) uses personal and other types of information we collect
          from you when you use or visit us at Gear-tech.io (the “Site”). This policy does not apply to the practices of
          companies not owned or controlled by GEAR or to people whom GEAR does not employ or manage. If you do not
          agree with our practices, please do not use our Site and the Services. Your access to and use of the Site and
          Services is also subject to the Terms of Use. All terms not defined here are defined in the Terms of Use.{' '}
        </p>
      </div>
      <div>
        <h4 className="document--list__title">2. The legal basis for the processing</h4>
        <div className="document--list__wrapper">
          <h4 className="document--list__title">Consent</h4>
          <p className="document--list__text">
            By consenting to this privacy notice you are given us permission to process your personal data specifically
            for the purpose identified.
          </p>
        </div>
        <div className="document--list__wrapper">
          <h4 className="document--list__title">Contract</h4>
          <p className="document--list__text">
            If you have entered into agreement with us, we have to store and process your personal data for the purposes
            of performance of such agreements.
          </p>
        </div>
      </div>
      <div>
        <h4 className="document--list__title">3. When do we collect your personal data?</h4>
        <p className="document--list__text">
          We may collect your personal data is you provide it to us, if you contact us by any means with queries,
          complaints etc or when you enter our Site.
        </p>
      </div>
      <div>
        <h4 className="document--list__title">4. Types of Information We Collect?</h4>
        <ol className="document--variants">
          <li>
            We may process your identity documents or data relating to transactions, if you provide such information to
            us (&quot;Personal data&quot;).
          </li>
          <li>
            We may process information contained in or relating to any communication that you send to us or what you
            generate through the use of the Site (&quot;communication data&quot;). Communication data includes 1) all
            your messages, requests and other communication with our support team which may happen during the dispute
            review process or via support tickets, emails, or by means of any other communication tool; and 2) all your
            communication and file attachments that you generate when conducting Projects or other data that you
            generated mainly by communicating to other users. Communication data may include, email address, username,
            IP address, full name, audio and video files and in the case of manual ID verification: photo of the user’s
            personal ID, photo of the user, and photo of the user’s utility bill or related document. The communication
            data may be processed for the purposes of communicating with you, record-keeping, in order to review and
            resolve disputes, serve our customers better and improve our service. The legal basis for this processing is
            our legitimate interests, namely the proper administration of our Site and business.
          </li>
          <li>
            We may process any of your personal data when necessary for the establishment, exercise or defense of legal
            claims, whether in court proceedings or outside the court procedure. The legal basis for this processing is
            our legitimate interests, namely the protection and assertion of our legal rights, your legal rights and the
            legal rights of others.
          </li>
          <li>
            In addition to the specific purposes for which we may process your personal data set out in this Section 5,
            we may also process any of your personal data where such processing is necessary for compliance with a legal
            obligation to which we are subject, or in order to protect your vital interests or the vital interests of
            another natural person.
          </li>
          <li>
            Aggregate and Anonymous Data: Aggregate and anonymous data is information that does not identify you
            specifically, including data collected automatically when you enter our Site (“Non-Personal Data”). This may
            include cookies, pixel tags, web beacons, browser analysis tools and web server logs. This also may include
            information from the devices you use to access our Site or mobile platform, your operating system type or
            mobile device model, browser type, domain, and other system settings, as well as the language your system
            uses and the country and time zone of your device. Our server logs may also record the IP addresses of the
            devices you use to interact with the Site. We may also collect information about a website you were visiting
            before you came to our Site and any website you visit after you leave our Site, if this information is
            supplied to us by your browser. We may also use software tools, such as Javascript, to measure and collect
            session information, including page response times, download errors, and methods used to browse away from
            the page. Non-Personal Data also includes some data collected by location services.
          </li>
        </ol>
      </div>
      <div>
        <h4 className="document--list__title">5. How We Use Personal Data</h4>
        <p className="document--list__text">We may use personal data to:</p>
        <ol className="document--variants">
          <li>Provide our services;</li>
          <li>Build, operate and improve our Site and services;</li>
          <li>Perform user analytics;</li>
          <li>Provide customer support;</li>
          <li>
            Send you reminders, technical notices, updates, security alerts and support, and administrative messages;
          </li>
          <li>
            Manage our everyday business needs such as Site administration, analytics, fraud prevention, or to comply
            with the law;
          </li>
          <li>
            Provide additional information that may be of interest to you such as, news, offers, promotions, or projects
            that we believe may be of interest.
          </li>
        </ol>
      </div>
      <div>
        <h4 className="document--list__title">6. How we protect your personal data</h4>
        <p className="document--list__text">
          We employ generally accepted industry standards to protect your personal information and we continuously
          strive to protect your information and privacy as much as we can. We secure access to all transactional areas
          of our websites and apps using ‘https’ technology.{' '}
        </p>
      </div>
      <div>
        <h4 className="document--list__title">7. How long your personal data will be kept?</h4>
        <p className="document--list__text">
          We process and store your personal data not longer than it is necessary for the purposes of such processing.
        </p>
        <p className="document--list__text">
          In some cases, it is not possible for us to specify in advance the periods for which your personal data will
          be retained. In such cases, we will determine the period of retention based on the period we need to access
          the data for the provision of services, receiving payment, resolving your customer support issue or other
          issues or for any other auditing or legal reasons.
        </p>
        <p className="document--list__text">
          Notwithstanding the other provisions of this Section 9, we may retain your personal data where such retention
          is necessary for compliance with a legal obligation to which we are subject, or in order to protect your vital
          interests or the vital interests of another natural person.
        </p>
      </div>
      <div>
        <h4 className="document--list__title">
          8. When and Why We Disclose Personal Information and Non-Personal Data
        </h4>
        <p className="document--list__text">
          Except as provided herein, we will not display on the Site, or otherwise disclose your personal data to any
          third parties unless it is necessary to provide our services, when required by law, or if we have good faith
          belief that such action is reasonably necessary to (a) comply with current judicial proceedings, a court order
          or legal process served on us, (b) protect and defend our rights, property and interests, including by
          enforcing our agreements, policies and Terms of Use, (c) respond to claims that any submitted content violates
          the rights of third parties; (d) respond to your requests for customer service; (e) protect the rights,
          property or personal safety of GEAR, its members, (f) in connection with, or during negotiations of, any
          merger, sale of company assets, financing or acquisition of all or a portion of our business by another
          company, or (g) with your consent to share the information.
        </p>
        <p className="document--list__text">
          We may share Non-Personal Data with analytics companies to learn information about how our users interact with
          the Site. This enables us to optimize our services and improve our efforts.{' '}
        </p>
        <p className="document--list__text">We will never sell your personal data or Non-Personal Data.</p>
      </div>
      <div>
        <h4 className="document--list__title">9. Children</h4>
        <p className="document--list__text">
          GEAR is not directed at persons under the age of 18 and does not consciously collect any Personal Information
          from persons under the age of 18. We request that all GEAR users be at least 18 years old (or a legal age in
          your jurisdiction) or have received parental consent and supervision when using the Service.
        </p>
      </div>
      <div>
        <h4 className="document--list__title">10. Changes to this Policy</h4>
        <p className="document--list__text">
          We change this Privacy Policy from time to time. We always indicate the date the last changes were published.
        </p>
      </div>
      <div>
        <h4 className="document--list__title">11. Analytics</h4>
        <p className="document--list__text">
          We may use third-party Service Providers to monitor and analyse the use of our Service.
        </p>
        <div className="document--list__wrapper">
          <h4 className="document--list__title">Google Analytics</h4>
          <p className="document--list__text">
            Google Analytics is a web analytics service offered by Google LLC that tracks and reports website traffic.
            Google uses the data collected to track and monitor the use of our Service. This data is shared with other
            Google services. Google may use the collected data to contextualise and personalise the ads of its own
            advertising network.
          </p>
          <p className="document--list__text">
            You can opt-out of having made your activity on the Service available to Google Analytics by installing the
            Google Analytics opt-out browser add-on. The add-on prevents the Google Analytics JavaScript (ga.js,
            analytics.js and dc.js) from sharing information with Google Analytics about visits activity.
          </p>
          <p className="document--list__text">
            For more information on the privacy practices of Google, please visit the Google Privacy Terms web page:{' '}
            <a href="https://policies.google.com/privacy?hl=en" target="blank">
              https://policies.google.com/privacy?hl=en
            </a>
          </p>
        </div>
      </div>
      <div>
        <h4 className="document--list__title">12. Cookie Policy</h4>
        <p className="document--list__text">What are cookies:</p>
        <p className="document--list__text">
          As is common practice with almost all professional websites, this site uses cookies, which are tiny files that
          are saved to your web browser, to improve your experience and to enable certain features, such as
          authentication. This page describes what information they gather, how we use it and why we sometimes need to
          store these cookies. We will also share how you can prevent these cookies from being stored, however this may
          downgrade or &apos;break&apos; certain elements of the sites functionality.
        </p>
        <p className="document--list__text">
          Cookies may be either &quot;persistent&quot; cookies or &quot;session&quot; cookies: a persistent cookie will
          be stored by a web browser and will remain valid until its set expiry date, unless deleted by the user before
          the expiry date; a session cookie, on the other hand, will expire at the end of the user session, when the web
          browser is closed.
        </p>
        <p className="document--list__text">
          Cookies do not typically contain any information that personally identifies a user, but personal information
          that we store about you may be linked to the information stored in and obtained from cookies.
        </p>
        <p className="document--list__text">
          When you submit data through a form, cookies may be set to remember your user details for future
          correspondence. In order to provide you with a great experience on this site, we may provide the functionality
          to set your preferences for how this site runs when you use it. In order to remember your preferences we need
          to set cookies so that this information can be called whenever you interact with a page that is affected by
          your preferences.
        </p>
        <p className="document--list__text">
          We run an affiliate program and as a part of it affiliates advertise our site and services. With the affiliate
          program we may use tracking cookies to track users who visit our site through one of our affiliate partner
          sites in order to credit them appropriately, and where applicable, allow our affiliate partners to provide you
          any bonus for making a purchase.
        </p>
        <p className="document--list__text">
          You can prevent the setting of cookies by adjusting the settings on your browser (see your browser Help or how
          to do this). Disabling cookies may result in disabling all functionality and features of this site. Therefore
          it is recommended that you do not disable cookies.
        </p>
      </div>
    </div>
  </div>
)