-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathblog.page.js
148 lines (141 loc) · 8.89 KB
/
blog.page.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
import * as React from 'react';
import { useState } from 'react';
import Link from 'next/link'
import Head from 'next/head'
import Header from './layout/header';
import Image from 'next/image'
import FaqComponent from './components/faq';
import Spacer from './components/spacer';
import Banner from './img/logo-white.png';
function Blog () {
const [currentType, setCurrentType] = useState("alle");
function setType(type) {
if (type === "nyheder") {
document.getElementById("nyheder").className = "price-input-element-active";
document.getElementById("introduktion").className = "price-input-element";
document.getElementById("anbefalinger").className = "price-input-element";
document.getElementById("alle").className = "price-input-element";
setCurrentType("nyheder");
} else if (type === "introduktion") {
document.getElementById("introduktion").className = "price-input-element-active";
document.getElementById("nyheder").className = "price-input-element";
document.getElementById("anbefalinger").className = "price-input-element";
document.getElementById("alle").className = "price-input-element";
setCurrentType("introduktion");
} else if (type === "alle") {
document.getElementById("alle").className = "price-input-element-active";
document.getElementById("nyheder").className = "price-input-element";
document.getElementById("introduktion").className = "price-input-element";
document.getElementById("anbefalinger").className = "price-input-element";
setCurrentType("alle");
} else if (type === "anbefalinger") {
document.getElementById("alle").className = "price-input-element";
document.getElementById("anbefalinger").className = "price-input-element-active";
document.getElementById("nyheder").className = "price-input-element";
document.getElementById("introduktion").className = "price-input-element";
setCurrentType("anbefalinger");
}
}
const [articles, setArticles] = useState([
{
id: 1,
h1: "Introduktion til Tipsspillet",
h2: "Bliv introduceret platformen, og find ud af hvordan du kommer igang",
dato: "Tir. 13 sep.",
author: "Mads Kaiser",
type: "introduktion"
}
])
return (
<>
<Head>
<title>Blog - Introduktion - Odds anbefalinger | Tipsspillet</title>
<link rel="canonical" href="https://www.tipsspillet.dk/blog" />
<meta name="description" content="Få hjælp til at komme igang på platformen, eller se de nyeste anbefalinger til odds fra profesionelle." />
<meta name="author" content="Mads Kaiser" />
<meta name="keywords" content="tipsspillet introduktion, blog, tipsspillet blog, tipsspillet tips, tipsspillet kom igang, odds anbefalinger, odds tips og tricks, tipsspillet anbefalinger, bedste tipsspillet odds" />
<meta itemProp="name" content="Tipsspillet Blog og Introduktion" />
<meta itemProp="description" content="Få hjælp til at komme igang på platformen, eller se de nyeste anbefalinger til odds fra profesionelle." />
<meta property="og:title" content="Blog - Introduktion - Odds anbefalinger | Tipsspillet" />
<meta property="og:url" content="https://www.tipsspillet.dk/blog" />
<meta property="og:description" content="Få hjælp til at komme igang på platformen, eller se de nyeste anbefalinger til odds fra profesionelle." />
</Head>
<Header />
<Spacer />
<div className="main-container" style={{paddingBottom: "20px"}}>
<div className="hero-text">
<p className="main-component-p animation-fadeleft">Tips og tricks - Hjælp til at komme igang</p>
<h1 className="whereami-h1 main-gradient animation-fadeleft animation-delay-200">Tipsspillets Blog</h1>
<h2 className="whereami-h3 animation-fadetop animation-delay-300">Få hjælp til at komme igang med Tipsspillet, eller få nyheder, anbefalinger fra <span className="color-primary font-weight-500">profesionelle</span> og meget mere.</h2>
</div>
</div>
<div className="priser-container">
<div className="section-price">
<div className="set-center">
<div className="price-input animation-fadeleft animation-delay-400">
<div className="price-input-element-active" id="alle" onClick={() => setType("alle")}>Alle</div>
<div className="price-input-element" id="introduktion" onClick={() => setType("introduktion")}>Introduktion</div>
<div className="price-input-element" id="nyheder" onClick={() => setType("nyheder")}>Nyheder</div>
<div className="price-input-element" id="anbefalinger" onClick={() => setType("anbefalinger")}>Anbefalinger</div>
</div>
</div>
<ul className="blog-container">
{articles.map((item) => {
if (currentType === "alle") {
return (
<li key={item.h1} className="blog-element animation-fadetop" style={{animationDelay: "0.5s"}}>
<Link href={"/blog/artikel?id=" + item.id}>
<div>
<div className="blog-img">
<Image width="80" height="80" alt="Tipsspillet logo" src={Banner} />
</div>
<div className="blog-info">
<h2 className="blog-h2">{item.h1}</h2>
<h2 className="blog-h3">{item.h2}</h2>
</div>
<div className="blog-byline">
<div className="blog-byline-img"></div>
<div className="blog-byline-inline">
<p className="blog-byline-h1">{item.author}</p>
<p className="blog-byline-h2">{item.dato}</p>
</div>
</div>
</div>
</Link>
</li>
);
} else {
if (item.type === currentType) {
return (
<li key={item.h1} className="blog-element animation-fadetop">
<Link href={"/blog/artikel?id=" + item.id}>
<div>
<div className="blog-img">
<Image width="80" height="80" alt="Tipsspillet logo" src={Banner} />
</div>
<div className="blog-info">
<h2 className="blog-h2">{item.h1}</h2>
<h2 className="blog-h3">{item.h2}</h2>
</div>
<div className="blog-byline">
<div className="blog-byline-img"></div>
<div className="blog-byline-inline">
<p className="blog-byline-h1">{item.author}</p>
<p className="blog-byline-h2">{item.dato}</p>
</div>
</div>
</div>
</Link>
</li>
);
}
}
})}
</ul>
</div>
</div>
<FaqComponent />
</>
)
}
export default Blog;