recloudstream/website
1
0
Fork 0
mirror of https://github.com/recloudstream/website.git synced 2024-08-15 03:18:45 +00:00
Code Issues Projects Releases Packages Wiki Activity

a hack to fix the buggy div

Browse source
This commit is contained in:
Cloudburst 2022-12-19 13:29:53 +01:00 committed by GitHub
parent 0aa7b00ef7
commit cfdc67f313
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
1 changed files with 25 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

31
src/pages/index.js
View file

@ -1,4 +1,4 @@
import React from "react"
import React, {useEffect, useState} from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
@ -7,6 +7,29 @@ import SEO from "../components/seo"
import bgImage from "../media/phones.webp"
/*
For some inexplicable reason on first load React decides to make this div class into "divider".
I have no idea why that happens this is why I implemented this weird hack that forces React to reload classes.
If you have any idea how to fix this properly, you're more than welcome to open a PR.
*/
const BuggyDiv = () => {
const [clName, setClName] = useState("flex justify-center w-full mb-5");
useEffect(() => {
setTimeout(() => {
setClName("flex justify-center w-full mb-5 div-loaded");
}, 100)
}, [])
return (
<div className={clName}>
<CompatBtn autoFocus={true} className="btn-primary" href="/install/">Install</CompatBtn>
<div className="divider divider-horizontal" />
<CompatBtn className="btn-primary" href="/repos/">Repositories</CompatBtn>
</div>
)
}
const IndexPage = () => {
return <Layout>
<Hero bg={bgImage}>
@ -16,11 +39,7 @@ const IndexPage = () => {
<div className="divider" />
On this official cloudstream/recloudstream site you can find downloads links and a list of repositories of extensions.
</p>
<div className="flex justify-center w-full mb-5">
<CompatBtn autoFocus={true} className="btn-primary" href="/install/">Install</CompatBtn>
<div className="divider divider-horizontal" />
<CompatBtn className="btn-primary" href="/repos/">Repositories</CompatBtn>
</div>
<BuggyDiv />
<CompatBtn className="btn-secondary" href="/docs/">Guides, FAQ & Docs</CompatBtn>
</Hero>
</Layout>