import {Meta, Story, Canvas} from '@storybook/addon-docs/blocks'
import Hit from './'

export const PODCAST = {
  id: 83,
  title: 'Developing Yourself While Teaching Others with Ali Spittel',
  path: '/podcasts/developing-yourself-while-teaching-others-with-ali-spittel',
  url:
    'https://egghead.io/podcasts/developing-yourself-while-teaching-others-with-ali-spittel',
  slug: 'developing-yourself-while-teaching-others-with-ali-spittel',
  summary:
    'Joel and Ali Spittel discuss her time in a teaching position, code challenges, blogging platforms, teaching beginners, and getting involved in local dev communities.',
  description:
    '<p>Today we are joined by Ali Spittel, a Software Engineer and Developer Advocate at dev.to, who speaks with us about:</p><ul><li>The skills she gained from a developer teaching job</li><li>How she kept up on her coding skills without writting production code by doing daily code challenges</li><li>Why she began to blog and how she made a habit out of it</li><li>Blogging on a platform vs having your own website</li><li>Using visual feedback to teach beginners to code</li><li>Involving herself in the local developer community</li></ul><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/2ed84114/transcript">"Developing Yourself While Teaching Others - with Ali Spittel" Transcript</a></p><h3>Resources:</h3><ul><li><a href="https://dev.to">dev.to</a></li></ul><h3>Ali Spittel:</h3><ul><li><a href="https://twitter.com/aspittel?lang=en">Twitter</a></li><li><a href="https://dev.to/aspittel">Ali on dev.to</a></li><li><a href="https://www.alispit.tel/#/">alispit.tel</a></li></ul><h3>Joel Hooks</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>',
  contributors: 'Joel Hooks',
  type: 'podcast',
  image: 'https://d2eip9sf3oo6c2.cloudfront.net/logo.svg',
  free_forever: true,
  _tags: [],
  objectID: 'podcast_83',
  _highlightResult: {
    title: {
      value: 'Developing Yourself While Teaching Others with Ali Spittel',
      matchLevel: 'none',
      matchedWords: [],
    },
    description: {
      value:
        '<p>Today we are joined by Ali Spittel, a Software Engineer and Developer Advocate at dev.to, who speaks with us about:</p><ul><li>The skills she gained from a developer teaching job</li><li>How she kept up on her coding skills without writting production code by doing daily code challenges</li><li>Why she began to blog and how she made a habit out of it</li><li>Blogging on a platform vs having your own website</li><li>Using visual feedback to teach beginners to code</li><li>Involving herself in the local developer community</li></ul><hr /><h3>Transcript</h3><p><a href="https://egghead.simplecast.com/episodes/2ed84114/transcript">"Developing Yourself While Teaching Others - with Ali Spittel" Transcript</a></p><h3>Resources:</h3><ul><li><a href="https://dev.to">dev.to</a></li></ul><h3>Ali Spittel:</h3><ul><li><a href="https://twitter.com/aspittel?lang=en">Twitter</a></li><li><a href="https://dev.to/aspittel">Ali on dev.to</a></li><li><a href="https://www.alispit.tel/#/">alispit.tel</a></li></ul><h3>Joel Hooks</h3><ul><li><a href="https://twitter.com/jhooks">Twitter</a></li><li><a href="https://joelhooks.com/">Website</a></li></ul>',
      matchLevel: 'none',
      matchedWords: [],
    },
    type: {value: 'podcast', matchLevel: 'none', matchedWords: []},
  },
  __position: 1,
}

export const LESSON = {
  id: 1369,
  url:
    'https://egghead.io/lessons/angular-check-ngmodel-validation-in-angular-2',
  duration: 55,
  primary_tag: {
    id: 300,
    name: 'angular',
    taggings_count: 434,
    image_file_name: 'angular2.png',
    image_content_type: 'image/png',
    image_file_size: 25499,
    image_updated_at: '2018-08-13T13:33:01.712-05:00',
    slug: 'angular',
    description:
      "Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.",
    url: 'https://egghead.io/browse/frameworks/angular',
    label: 'Angular',
    popularity_order: -8388589,
    updated_at: '2020-07-13T05:15:33.418-05:00',
  },
  instructor: {
    id: 5,
    first_name: 'John ',
    last_name: 'Lindquist',
    profile_picture_url: null,
    twitter: 'johnlindquist',
    website: 'http://egghead.io',
    bio_short:
      "John Lindquist is a co-founder of egghead.io\nJohn has spent the majority of his career developing Rich Web Applications. Before starting egghead.io, John worked at JetBrains as a WebStorm evangelist, and before that he was a Technical Architect at Isobar leading large teams in building the latest and greatest in web apps for the Air Force, HBO, and Bloomberg.\n[Learn more about John's story with egghead here.](https://howtoegghead.com/instructor/case-studies/john-lindquist)\n",
    created_at: '2013-12-15T15:09:08.702-06:00',
    updated_at: '2020-07-13T08:00:25.454-05:00',
    avatar_file_name: 'avatar-500x500.jpg',
    avatar_content_type: 'image/jpeg',
    avatar_file_size: 106258,
    avatar_updated_at: '2018-08-13T13:41:28.703-05:00',
    percentage: '0.2',
    user_id: 2,
    slug: 'john-lindquist',
    trained_by_instructor_id: null,
    slack_id: 'U030CS0R0',
    state: 'signed',
    email: null,
    gear_tracking_number: '',
    contract_id: null,
    avatar_processing: null,
    slack_group_id: 'G70JH2Y7P',
    skip_onboarding: null,
    _flag_list: [],
  },
  is_pro_content: true,
  title: 'Check ngModel Validation in Angular 2',
  slug: 'angular-check-ngmodel-validation-in-angular-2',
  rank: -8244723,
  summary:
    'Checking the validity of an Angular 2 input using ngModel is simply a matter of getting a reference to the ngModel itself. You get the reference by using the `#ref` syntax, assigning it a name, then `ngModel` will check all of the validity rules for you.',
  notes: null,
  instructor_name: 'John Lindquist',
  image:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/300/thumb/angular2.png',
  state: 'published',
  path: '/lessons/angular-check-ngmodel-validation-in-angular-2',
  type: 'lesson',
  visibility_state: 'indexed',
  free_forever: false,
  _tags: ['angular'],
  objectID: 'lesson_1369',
  _highlightResult: {
    title: {
      value: 'Check ngModel Validation in Angular 2',
      matchLevel: 'none',
      matchedWords: [],
    },
    instructor_name: {
      value: 'John Lindquist',
      matchLevel: 'none',
      matchedWords: [],
    },
    type: {value: 'lesson', matchLevel: 'none', matchedWords: []},
    _tags: [{value: 'angular', matchLevel: 'none', matchedWords: []}],
  },
  __position: 20,
}

export const COURSE = {
  id: 311,
  url: 'https://egghead.io/courses/gatsby-theme-authoring',
  duration: 3486,
  primary_tag: {
    id: 1211,
    name: 'gatsby',
    taggings_count: 230,
    image_file_name: 'gatsby.png',
    image_content_type: 'image/png',
    image_file_size: 20756,
    image_updated_at: '2018-08-13T13:34:33.130-05:00',
    slug: 'gatsby',
    description:
      'Gatsby is a blazing fast static site generator built with React. Gatsby gives you all of the modern JavaScript tools you want; set up and ready to go out of the box.',
    url: 'https://egghead.io/browse/frameworks/gatsby',
    label: 'Gatsby',
    popularity_order: -8388598,
    updated_at: '2020-11-11T05:15:28.353-06:00',
  },
  instructor: {
    id: 204,
    first_name: 'Jason',
    last_name: 'Lengstorf',
    profile_picture_url: null,
    twitter: 'jlengstorf',
    website: 'https://lengstorf.com',
    bio_short:
      'Jason Lengstorf is a developer, architect, occasional designer, and frequent speaker. He’s passionate about building tools, systems, and training materials to create high-performance teams and apps. He later encourages those teams to use their newfound free time to go outside and be people and stuff. He lives in Portland, Oregon.',
    created_at: '2018-03-15T15:56:03.543-05:00',
    updated_at: '2020-11-11T14:00:16.247-06:00',
    avatar_file_name: 'jason-lengstorf_(1).jpg',
    avatar_content_type: 'image/jpeg',
    avatar_file_size: 242466,
    avatar_updated_at: '2018-08-13T13:39:07.203-05:00',
    percentage: '0.2',
    user_id: 180813,
    slug: 'jason-lengstorf',
    trained_by_instructor_id: null,
    slack_id: 'U9QNZ4UH2',
    state: 'signed',
    email: 'jason@lengstorf.com',
    gear_tracking_number: null,
    contract_id: 'd51968ff2dfcc3e0804eddc225dee35dbaa1002c',
    avatar_processing: null,
    slack_group_id: 'G9Q7L2V0R',
    skip_onboarding: null,
    _flag_list: [],
  },
  free_forever: true,
  title: 'Gatsby Theme Authoring',
  rank: -8135471,
  slug: 'gatsby-theme-authoring',
  image:
    'https://d2eip9sf3oo6c2.cloudfront.net/series/square_covers/000/000/311/thumb/EGH_GatsbyThemes_Final.png',
  instructor_name: 'Jason Lengstorf',
  instructor_avatar_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/instructors/avatars/000/000/204/original/jason-lengstorf_%281%29.jpg',
  instructor_url: 'https://egghead.io/instructors/jason-lengstorf',
  primary_tag_image_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/211/thumb/gatsby.png',
  summary:
    "Gatsby Themes are the next iteration of web development. They take all the good things about Gatsby and make them even more reusable and extendable. Themes are composable chunks of fully functional websites-- not just visual aspects.\n\nBecause they’re composable, you can have multiple themes on a single site. This lets you pick the right eCommerce theme, with whatever backing engine you want. You can then install whatever blog theme you want-- Wordpress, Contentful, etc. and you can customize them both. It's up to you!\n\nFor a written version of this course, check out the [Gatsby docs](https://www.gatsbyjs.org/tutorial/building-a-theme/).",
  state: 'published',
  path: '/courses/gatsby-theme-authoring',
  type: 'course',
  visibility_state: 'indexed',
  _tags: ['gatsby'],
  objectID: 'course_311',
  _highlightResult: {
    title: {
      value: 'Gatsby Theme Authoring',
      matchLevel: 'none',
      matchedWords: [],
    },
    instructor_name: {
      value: 'Jason Lengstorf',
      matchLevel: 'none',
      matchedWords: [],
    },
    type: {value: 'course', matchLevel: 'none', matchedWords: []},
    _tags: [{value: 'gatsby', matchLevel: 'none', matchedWords: []}],
  },
  __position: 20,
}

export const TALK = {
  id: 7644,
  url:
    'https://egghead.io/talks/css-say-hello-to-box-flex-and-stack-layouts-in-the-component-age',
  duration: 1299,
  primary_tag: {
    id: 175,
    name: 'css',
    taggings_count: 433,
    image_file_name: 'csslang.png',
    image_content_type: 'image/png',
    image_file_size: 24243,
    image_updated_at: '2018-08-13T13:38:11.999-05:00',
    slug: 'css',
    description:
      'Cascading Style Sheets bring order and beauty to our applications.',
    url: 'https://egghead.io/browse/languages/css',
    label: 'CSS',
    popularity_order: -8388589,
    updated_at: '2020-11-11T05:15:28.542-06:00',
  },
  instructor: {
    id: 186,
    first_name: 'Artem',
    last_name: 'Sapegin',
    profile_picture_url: null,
    twitter: 'iamsapegin',
    website: 'https://sapegin.me',
    bio_short:
      'Coffee first frontend engineer living in Berlin, award-losing photographer, and friend of dogs. Creator of React Styleguidist.',
    created_at: '2017-12-18T10:08:17.184-06:00',
    updated_at: '2020-11-03T13:54:34.754-06:00',
    avatar_file_name: 'Artem_Sapegin_2018_dev.jpg',
    avatar_content_type: 'image/jpeg',
    avatar_file_size: 600866,
    avatar_updated_at: '2019-10-08T03:10:52.385-05:00',
    percentage: '0.2',
    user_id: 82008,
    slug: 'artem-sapegin',
    trained_by_instructor_id: null,
    slack_id: 'U8FKJ4LMN',
    state: 'signed',
    email: 'artem@sapegin.ru',
    gear_tracking_number: null,
    contract_id: '5e3f697e3316893352e8ef85ee732946219ced09',
    avatar_processing: false,
    slack_group_id: 'G8H218EVB',
    skip_onboarding: null,
    _flag_list: [],
  },
  is_pro_content: false,
  title: 'Say hello to Box, Flex and Stack: layouts in the component age',
  slug: 'css-say-hello-to-box-flex-and-stack-layouts-in-the-component-age',
  rank: 8388383,
  summary:
    'CSS is a great language and has improved a lot in the past decade but it still has the same global nature as in its early days. CSS was designed to style documents, which causes issues in large scale applications. Naming conventions, like BEM, CSS Modules and later CSS in JS significantly improved the maintainability of styles, but we can go one step further. Using components to create responsive Flexbox and Grid layouts can simplify code, improve the developer experience and feels natural in React. In this talk, we’ll explore how to create any kind of page layout with just three components.\n',
  notes: null,
  instructor_name: 'Artem Sapegin',
  primary_tag_image_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/175/thumb/csslang.png',
  instructor_avatar_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/instructors/avatars/000/000/186/original/Artem_Sapegin_2018_dev.jpg',
  instructor_url: 'https://egghead.io/instructors/artem-sapegin',
  image:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/175/thumb/csslang.png',
  state: 'published',
  path:
    '/talks/css-say-hello-to-box-flex-and-stack-layouts-in-the-component-age',
  type: 'talk',
  visibility_state: 'indexed',
  free_forever: true,
  _tags: ['css'],
  objectID: 'talk_7644',
  _highlightResult: {
    title: {
      value: 'Say hello to Box, Flex and Stack: layouts in the component age',
      matchLevel: 'none',
      matchedWords: [],
    },
    instructor_name: {
      value: 'Artem Sapegin',
      matchLevel: 'none',
      matchedWords: [],
    },
    type: {value: 'talk', matchLevel: 'none', matchedWords: []},
    _tags: [{value: 'css', matchLevel: 'none', matchedWords: []}],
  },
  __position: 20,
}

export const PLAYLIST = {
  id: 350734,
  url: 'https://egghead.io/playlists/github-tips-tricks-6fc4',
  duration: 512,
  primary_tag: {
    id: 276,
    name: 'github',
    taggings_count: 79,
    image_file_name: 'github_logo.png',
    image_content_type: 'image/png',
    image_file_size: 17397,
    image_updated_at: '2018-08-13T13:33:01.708-05:00',
    slug: 'github',
    description:
      'GitHub fosters a fast, flexible, and collaborative development process that lets you work on your own or with others.',
    url: 'https://egghead.io/browse/platforms/github',
    label: 'GitHub',
    popularity_order: -8388583,
    updated_at: '2020-08-18T05:15:31.538-05:00',
  },
  instructor: {
    id: 239,
    first_name: 'Joe',
    last_name: 'Previte',
    profile_picture_url: null,
    twitter: 'jsjoeio',
    website: 'https://joeprevite.com',
    bio_short:
      "Hi, I'm Joe! 👋🏼\r\n\r\nI'm a developer with a passion for learning. I currently work as an Open Source Developer Advocate at Facebook. In my free time, I like to workout, spend time outdoors and meditate.",
    created_at: '2018-09-04T20:05:22.239-05:00',
    updated_at: '2020-08-18T20:00:10.009-05:00',
    avatar_file_name: 'Screen_Shot_2020-04-01_at_10.42.54_AM.png',
    avatar_content_type: 'image/png',
    avatar_file_size: 326964,
    avatar_updated_at: '2020-04-02T11:31:14.643-05:00',
    percentage: '0.2',
    user_id: 346147,
    slug: 'joe-previte',
    trained_by_instructor_id: null,
    slack_id: 'UCLJRGNHF',
    state: 'signed',
    email: 'jjprevite@gmail.com',
    gear_tracking_number: null,
    contract_id: '5e56cd5d4ede6919b264f8295cc62d1d7eb63b21',
    avatar_processing: false,
    slack_group_id: 'GCLTCP0SC',
    skip_onboarding: null,
    _flag_list: [],
  },
  rank: -7461309,
  title: 'GitHub Tips & Tricks',
  slug: 'github-tips-tricks-6fc4',
  image:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/276/thumb/github_logo.png',
  instructor_name: 'Joe Previte',
  primary_tag_image_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/000/276/thumb/github_logo.png',
  instructor_avatar_url:
    'https://d2eip9sf3oo6c2.cloudfront.net/instructors/avatars/000/000/239/original/Screen_Shot_2020-04-01_at_10.42.54_AM.png',
  instructor_url: 'https://egghead.io/instructors/joe-previte',
  description:
    "Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out! ",
  state: 'published',
  path: '/playlists/github-tips-tricks-6fc4',
  type: 'playlist',
  visibility_state: 'indexed',
  free_forever: true,
  _tags: ['github'],
  objectID: 'playlist_350734',
  _highlightResult: {
    title: {
      value: 'GitHub Tips & Tricks',
      matchLevel: 'none',
      matchedWords: [],
    },
    instructor_name: {
      value: 'Joe Previte',
      matchLevel: 'none',
      matchedWords: [],
    },
    description: {
      value:
        "Handy tips for boosting your productivity in GitHub. These are bite-sized things you can take advantage of today to boost your efficiency by 1% or more. What are you waiting for? Check 'em out! ",
      matchLevel: 'none',
      matchedWords: [],
    },
    type: {value: 'playlist', matchLevel: 'none', matchedWords: []},
    _tags: [{value: 'github', matchLevel: 'none', matchedWords: []}],
  },
  __position: 20,
}

<Meta title="Components/Search/Hit" />

# Hit Component

Hit component for search UI.

<Canvas>
  <Story name="Podcast">
    <Hit hit={PODCAST} />
  </Story>
  <Story name="Lesson">
    <Hit hit={LESSON} />
  </Story>
  <Story name="Course">
    <Hit hit={COURSE} />
  </Story>
  <Story name="Talk">
    <Hit hit={TALK} />
  </Story>
  <Story name="Playlist">
    <Hit hit={PLAYLIST} />
  </Story>
</Canvas>
