Skip to content

Commit fe83bd1

Browse files
olafcholafch
committed
code refactored
1 parent 3b82d64 commit fe83bd1

4 files changed

Lines changed: 105 additions & 95 deletions

File tree

‎docs/src/pages/HomepageHeader.tsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
2+
import { HeaderButtons } from './components/HeaderButtons'
3+
import { ImageSlider } from './components/ImageSlider'
4+
import styles from './index.module.css'
5+
import Heading from '@theme/Heading'
6+
import clsx from 'clsx'
7+
8+
export function HomepageHeader() {
9+
const { siteConfig } = useDocusaurusContext()
10+
11+
return (
12+
<header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
13+
<div className="container padding-vert--xl">
14+
<Heading as="h1" className="hero__title">
15+
{siteConfig.title}
16+
</Heading>
17+
<p className="hero__subtitle">{siteConfig.tagline}</p>
18+
<HeaderButtons />
19+
<ImageSlider />
20+
</div>
21+
</header>
22+
)
23+
}

‎docs/src/pages/components/HeaderButtons.tsx‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
import styles from '../index.module.css'
2+
import Link from '@docusaurus/Link'
3+
import clsx from 'clsx'
4+
5+
export const HeaderButtons = () => (
6+
<div className={styles.buttonsContainer}>
7+
<Link
8+
className={clsx('button button--secondary button--lg', styles.buttonReadDocs)}
9+
to="/docs/overview"
10+
>
11+
Read docs
12+
</Link>
13+
<Link
14+
className={clsx('button button--secondary button--lg', styles.buttonTryIt)}
15+
to="https://binarapps.online/sign-in"
16+
>
17+
Try it
18+
</Link>
19+
</div>
20+
)

‎docs/src/pages/components/ImageSlider.tsx‎

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import styles from '../index.module.css'
2+
import Slider from 'react-slick'
3+
4+
const sliderSettings = {
5+
adaptiveHeight: true,
6+
arrows: true,
7+
autoplay: true,
8+
autoplaySpeed: 3000,
9+
dots: true,
10+
infinite: true,
11+
responsive: [
12+
{
13+
breakpoint: 1000,
14+
settings: {
15+
slidesToShow: 2,
16+
slidesToScroll: 1,
17+
},
18+
},
19+
{
20+
breakpoint: 550,
21+
settings: {
22+
slidesToShow: 1,
23+
slidesToScroll: 1,
24+
},
25+
},
26+
],
27+
slidesToScroll: 1,
28+
slidesToShow: 3,
29+
speed: 500,
30+
}
31+
32+
const sliderImages = [
33+
{
34+
src: '/img/iphone_signup_draft_light.png',
35+
alt: 'First iPhone draft',
36+
},
37+
{
38+
src: '/img/iphone_signup_draft_dark.png',
39+
alt: 'Second iPhone draft',
40+
},
41+
{
42+
src: '/img/iphone_settings_draft_light.png',
43+
alt: 'Third iPhone draft',
44+
},
45+
{
46+
src: '/img/iphone_settings_draft_dark.png',
47+
alt: 'Fourth iPhone draft',
48+
},
49+
]
50+
51+
export const ImageSlider = () => (
52+
<div className={styles.sliderContainer}>
53+
<Slider {...sliderSettings}>
54+
{sliderImages.map((image, index) => (
55+
<div key={index} className={styles.imageWrapper}>
56+
<img src={image.src} alt={image.alt} className={styles.image} />
57+
</div>
58+
))}
59+
</Slider>
60+
</div>
61+
)

‎docs/src/pages/index.tsx‎

Lines changed: 1 addition & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -1,101 +1,7 @@
11
import HomepageFeatures from '@site/src/components/HomepageFeatures'
22
import useDocusaurusContext from '@docusaurus/useDocusaurusContext'
3-
import styles from './index.module.css'
4-
import Heading from '@theme/Heading'
5-
import Link from '@docusaurus/Link'
3+
import { HomepageHeader } from './HomepageHeader'
64
import Layout from '@theme/Layout'
7-
import Slider from 'react-slick'
8-
import React from 'react'
9-
import clsx from 'clsx'
10-
11-
function HomepageHeader() {
12-
const { siteConfig } = useDocusaurusContext()
13-
14-
const settings = {
15-
adaptiveHeight: true,
16-
arrows: true,
17-
autoplay: true,
18-
autoplaySpeed: 3000,
19-
dots: true,
20-
infinite: true,
21-
responsive: [
22-
{
23-
breakpoint: 1000,
24-
settings: {
25-
slidesToShow: 2,
26-
slidesToScroll: 1,
27-
},
28-
},
29-
{
30-
breakpoint: 550,
31-
settings: {
32-
slidesToShow: 1,
33-
slidesToScroll: 1,
34-
},
35-
},
36-
],
37-
slidesToScroll: 1,
38-
slidesToShow: 3,
39-
speed: 500,
40-
}
41-
42-
return (
43-
<header className={clsx('hero hero--primary padding-vert--xl', styles.heroBanner)}>
44-
<div className="container padding-vert--xl">
45-
<Heading as="h1" className="hero__title">
46-
{siteConfig.title}
47-
</Heading>
48-
<p className="hero__subtitle">{siteConfig.tagline}</p>
49-
<div className={styles.buttonsContainer}>
50-
<Link
51-
className={clsx('button button--secondary button--lg', styles.buttonReadDocs)}
52-
to="/docs/overview"
53-
>
54-
Read docs
55-
</Link>
56-
<Link
57-
className={clsx('button button--secondary button--lg', styles.buttonTryIt)}
58-
to="https://binarapps.online/sign-in"
59-
>
60-
Try it
61-
</Link>
62-
</div>
63-
<div className={styles.sliderContainer}>
64-
<Slider {...settings}>
65-
<div className={styles.imageWrapper}>
66-
<img
67-
src="/img/iphone_signup_draft_light.png"
68-
alt="First iPhone draft"
69-
className={styles.image}
70-
/>
71-
</div>
72-
<div className={styles.imageWrapper}>
73-
<img
74-
src="/img/iphone_signup_draft_dark.png"
75-
alt="Second iPhone draft"
76-
className={styles.image}
77-
/>
78-
</div>
79-
<div className={styles.imageWrapper}>
80-
<img
81-
src="/img/iphone_settings_draft_light.png"
82-
alt="Third iPhone draft"
83-
className={styles.image}
84-
/>
85-
</div>
86-
<div className={styles.imageWrapper}>
87-
<img
88-
src="/img/iphone_settings_draft_dark.png"
89-
alt="Fourth iPhone draft"
90-
className={styles.image}
91-
/>
92-
</div>
93-
</Slider>
94-
</div>
95-
</div>
96-
</header>
97-
)
98-
}
995

1006
export default function Home(): JSX.Element {
1017
const { siteConfig } = useDocusaurusContext()

0 commit comments

Comments
 (0)