@rileybathurst/paddle 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +20 -15
- package/src/PaddleComposition.tsx +1 -2
- package/src/PaddleLocationCard.tsx +17 -10
- package/src/PaddleLocationDeck.tsx +1 -1
- package/src/PaddleTestimonial.tsx +16 -0
- package/src/PaddleTestimonials.tsx +4 -12
- package/src/index.tsx +3 -10
- package/src/styles/app.css +7 -1
- package/src/styles/astro.css +30 -0
- package/src/styles/buttons.css +184 -13
- package/src/styles/cards.css +91 -9
- package/src/styles/color.css +33 -90
- package/src/styles/layout.css +141 -42
- package/src/styles/links.css +42 -6
- package/src/styles/lists.css +12 -26
- package/src/styles/media.css +17 -8
- package/src/styles/nav.css +131 -0
- package/src/styles/panels.css +83 -0
- package/src/styles/tables.css +2 -0
- package/src/styles/typography.css +3 -27
- package/src/styles/variables.css +116 -5
- package/src/styles/visibility.css +11 -1
- package/src/types/testimonial-types.ts +7 -0
- package/src/Button.tsx +0 -15
|
@@ -0,0 +1,131 @@
|
|
|
1
|
+
/*------------------------------------*/
|
|
2
|
+
/* #NAV */
|
|
3
|
+
/*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/* TODO: variables */
|
|
6
|
+
|
|
7
|
+
header {
|
|
8
|
+
z-index: var(--floor);
|
|
9
|
+
position: relative;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.menu__small-button {
|
|
13
|
+
margin-block-end: 0;
|
|
14
|
+
transform: translate3D(0, 0, 0); /* I need this to hide things */
|
|
15
|
+
line-height: 1.5;
|
|
16
|
+
height: 2rem;
|
|
17
|
+
overflow: hidden;
|
|
18
|
+
z-index: 1; /* TODO: variable */
|
|
19
|
+
position: relative;
|
|
20
|
+
/* width: calc(100% - 1rem); */
|
|
21
|
+
width: 100%;
|
|
22
|
+
margin-inline: auto;
|
|
23
|
+
box-shadow: var(--penumbra);
|
|
24
|
+
border: none;
|
|
25
|
+
/* Book now colors */
|
|
26
|
+
background-color: var(--neutral-800);
|
|
27
|
+
color: var(--neutral-300);
|
|
28
|
+
|
|
29
|
+
@media (prefers-color-scheme: dark) {
|
|
30
|
+
background-color: var(--neutral-300);
|
|
31
|
+
color: var(--neutral-800);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.spinning-button {
|
|
36
|
+
position: fixed; /* I never like these things but it's needed here */
|
|
37
|
+
height: 1rem;
|
|
38
|
+
line-height: 2rem;
|
|
39
|
+
transition: 2s ease;
|
|
40
|
+
margin-block-start: -1rem; /* I dont know why I have to add this something about defaults probably */
|
|
41
|
+
}
|
|
42
|
+
|
|
43
|
+
nav {
|
|
44
|
+
margin: 1.5rem;
|
|
45
|
+
margin-block-start: 0; /* testing slide menu */
|
|
46
|
+
transition: 2s ease;
|
|
47
|
+
padding-inline-start: 1.5rem;
|
|
48
|
+
|
|
49
|
+
@media (min-width: 40rem) {
|
|
50
|
+
max-width: var(--pelican);
|
|
51
|
+
margin: 0 auto;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
ul {
|
|
55
|
+
display: flex;
|
|
56
|
+
flex-flow: row wrap;
|
|
57
|
+
justify-content: space-between;
|
|
58
|
+
margin-block: 0; /* testing slide menu */
|
|
59
|
+
padding-block-start: 1.25rem;
|
|
60
|
+
padding-block-start: calc(var(--elbrus) / 2);
|
|
61
|
+
list-style: none;
|
|
62
|
+
padding-inline-start: 0;
|
|
63
|
+
align-items: baseline;
|
|
64
|
+
|
|
65
|
+
li {
|
|
66
|
+
margin-block-end: 0;
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.menu__small {
|
|
72
|
+
transition: var(--fade);
|
|
73
|
+
|
|
74
|
+
button {
|
|
75
|
+
display: flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
justify-content: center;
|
|
78
|
+
border-radius: 0;
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
nav {
|
|
82
|
+
padding-inline-start: 0;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
ul {
|
|
86
|
+
flex-direction: column;
|
|
87
|
+
gap: var(--vinson);
|
|
88
|
+
z-index: var(--floor);
|
|
89
|
+
position: relative;
|
|
90
|
+
/* v1.2 keep this untill i know why I used a custom */
|
|
91
|
+
/* background-color: hsl(25, 37%, 87.5%); ? why is this custom */
|
|
92
|
+
/* box-shadow: 0 0 0 100vmax hsl(25, 37%, 87.5%); ? why is this custom */
|
|
93
|
+
background-color: var(--neutral-300);
|
|
94
|
+
box-shadow: 0 0 0 100vmax var(--neutral-300);
|
|
95
|
+
clip-path: inset(0 -100vmax);
|
|
96
|
+
|
|
97
|
+
@media (prefers-color-scheme: dark) {
|
|
98
|
+
background-color: var(--neutral-700);
|
|
99
|
+
box-shadow: 0 0 0 100vmax var(--neutral-700);
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
li a {
|
|
103
|
+
padding-inline: calc(var(--elbrus) / 2);
|
|
104
|
+
padding-block: calc(var(--elbrus) / 4);
|
|
105
|
+
text-decoration: underline;
|
|
106
|
+
}
|
|
107
|
+
|
|
108
|
+
li:first-child {
|
|
109
|
+
margin-block-start: 1.5rem;
|
|
110
|
+
margin-block-start: calc(var(--elbrus) / 2);
|
|
111
|
+
margin-block-start: 0;
|
|
112
|
+
}
|
|
113
|
+
|
|
114
|
+
li:last-child {
|
|
115
|
+
margin-block-end: 1.5rem;
|
|
116
|
+
}
|
|
117
|
+
|
|
118
|
+
.book-now {
|
|
119
|
+
margin: 0;
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
|
|
124
|
+
.tahoe-city .menu__small ul {
|
|
125
|
+
/* * reverts to clean dark scheme */
|
|
126
|
+
@media (prefers-color-scheme: light) {
|
|
127
|
+
background-color: var(--sand-100);
|
|
128
|
+
box-shadow: 0 0 0 100vmax var(--sand-100);
|
|
129
|
+
clip-path: inset(0 -100vmax);
|
|
130
|
+
}
|
|
131
|
+
}
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
/*------------------------------------*/
|
|
2
|
+
/* #PANELS */
|
|
3
|
+
/*------------------------------------*/
|
|
4
|
+
|
|
5
|
+
/* Panels are used to group content and provide visual separation */
|
|
6
|
+
/* .horizon { base level } */
|
|
7
|
+
/* .cloud { floating, elevated content } */
|
|
8
|
+
/* .aurora { special, highlighted areas } */
|
|
9
|
+
|
|
10
|
+
.cloud {
|
|
11
|
+
background-color: var(--neutral-200);
|
|
12
|
+
box-shadow: 0 0 0 100vmax var(--neutral-200);
|
|
13
|
+
clip-path: inset(0 -100vmax);
|
|
14
|
+
|
|
15
|
+
@media (prefers-color-scheme: dark) {
|
|
16
|
+
background-color: var(--neutral-700);
|
|
17
|
+
box-shadow: 0 0 0 100vmax var(--neutral-700);
|
|
18
|
+
color: var(--neutral-200);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
/* * additional safety step */
|
|
22
|
+
@media (prefers-color-scheme: light) {
|
|
23
|
+
button,
|
|
24
|
+
.button {
|
|
25
|
+
background-color: var(--neutral-100);
|
|
26
|
+
border-color: white;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.aurora {
|
|
32
|
+
background-color: white;
|
|
33
|
+
box-shadow: 0 0 0 100vmax white;
|
|
34
|
+
clip-path: inset(0 -100vmax);
|
|
35
|
+
|
|
36
|
+
@media (prefers-color-scheme: dark) {
|
|
37
|
+
background-color: black;
|
|
38
|
+
box-shadow: 0 0 0 100vmax black;
|
|
39
|
+
}
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.south-tahoe {
|
|
43
|
+
.cloud {
|
|
44
|
+
background-color: var(--cloud-background-color);
|
|
45
|
+
box-shadow: 0 0 0 100vmax var(--cloud-background-color);
|
|
46
|
+
clip-path: inset(0 -100vmax);
|
|
47
|
+
color: var(--cloud-color);
|
|
48
|
+
|
|
49
|
+
@media (prefers-color-scheme: dark) {
|
|
50
|
+
background-color: var(--cloud-dark-background-color);
|
|
51
|
+
box-shadow: 0 0 0 100vmax var(--cloud-dark-background-color);
|
|
52
|
+
color: var(--cloud-dark-color);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
a:not(button):not(.button):not(.book-now) {
|
|
56
|
+
@media (prefers-color-scheme: dark) {
|
|
57
|
+
color: var(--lake-400);
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
button,
|
|
62
|
+
.button {
|
|
63
|
+
background-color: var(--aurora-background-color);
|
|
64
|
+
|
|
65
|
+
@media (prefers-color-scheme: dark) {
|
|
66
|
+
background-color: var(--aurora-dark-background-color);
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
|
|
71
|
+
.aurora {
|
|
72
|
+
background-color: var(--aurora-background-color);
|
|
73
|
+
box-shadow: 0 0 0 100vmax var(--aurora-background-color);
|
|
74
|
+
clip-path: inset(0 -100vmax);
|
|
75
|
+
color: var(--aurora-color);
|
|
76
|
+
|
|
77
|
+
@media (prefers-color-scheme: dark) {
|
|
78
|
+
background-color: var(--aurora-dark-background-color);
|
|
79
|
+
box-shadow: 0 0 0 100vmax var(--aurora-dark-background-color);
|
|
80
|
+
color: var(--aurora-dark-color);
|
|
81
|
+
}
|
|
82
|
+
}
|
|
83
|
+
}
|
package/src/styles/tables.css
CHANGED
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/*------------------------------------*\
|
|
2
2
|
#TYPOGRAPHY
|
|
3
|
-
/* TODO: Im not happy with this */
|
|
4
3
|
/*------------------------------------*/
|
|
5
4
|
|
|
6
5
|
body {
|
|
@@ -68,8 +67,6 @@ h3,
|
|
|
68
67
|
|
|
69
68
|
h4,
|
|
70
69
|
.kilimanjaro,
|
|
71
|
-
.brow,
|
|
72
|
-
.page-title,
|
|
73
70
|
/* .spec h2 put this inline */
|
|
74
71
|
.spec h2 {
|
|
75
72
|
font-size: 1.5rem; /* 24px */
|
|
@@ -136,7 +133,7 @@ p {
|
|
|
136
133
|
}
|
|
137
134
|
|
|
138
135
|
.two-small-lines {
|
|
139
|
-
margin-bottom: 0.5rem;
|
|
136
|
+
margin-bottom: 0.5rem;
|
|
140
137
|
}
|
|
141
138
|
|
|
142
139
|
/*------------------*/
|
|
@@ -150,7 +147,7 @@ hr {
|
|
|
150
147
|
margin-block-end: var(--kosciuszko);
|
|
151
148
|
|
|
152
149
|
@media (prefers-color-scheme: dark) {
|
|
153
|
-
border-bottom: 1px solid;
|
|
150
|
+
border-bottom: 1px solid var(--neutral-500);
|
|
154
151
|
}
|
|
155
152
|
}
|
|
156
153
|
|
|
@@ -190,31 +187,10 @@ hr.no {
|
|
|
190
187
|
hgroup {
|
|
191
188
|
display: flex;
|
|
192
189
|
flex-flow: row wrap;
|
|
193
|
-
column-gap: 1ch;
|
|
190
|
+
column-gap: 1ch;
|
|
194
191
|
align-items: baseline;
|
|
195
192
|
}
|
|
196
193
|
|
|
197
|
-
/*------------------*/
|
|
198
|
-
/* #CREST */
|
|
199
|
-
/*------------------*/
|
|
200
|
-
|
|
201
|
-
/* .crest, .brow, .supra all work as a set */
|
|
202
|
-
.crest {
|
|
203
|
-
display: flex;
|
|
204
|
-
flex-direction: column;
|
|
205
|
-
gap: 0; /* resets the default hgroup */
|
|
206
|
-
}
|
|
207
|
-
|
|
208
|
-
.brow {
|
|
209
|
-
order: 1;
|
|
210
|
-
margin-block-end: var(--vinson);
|
|
211
|
-
}
|
|
212
|
-
|
|
213
|
-
.supra {
|
|
214
|
-
font-family: var(--heading_font);
|
|
215
|
-
order: 2;
|
|
216
|
-
}
|
|
217
|
-
|
|
218
194
|
/*------------------*/
|
|
219
195
|
/* #SPECIFICS */
|
|
220
196
|
/*------------------*/
|
package/src/styles/variables.css
CHANGED
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
/* #COLOR */
|
|
8
8
|
/*------------------------------------*/
|
|
9
9
|
|
|
10
|
-
/*
|
|
10
|
+
/* TODO: v1.2 swap to tanager and remove */
|
|
11
11
|
--ruby-100: hsl(0, 50%, 50%); /* base */
|
|
12
12
|
--ruby-200: hsl(0, 50%, 37.5%);
|
|
13
13
|
--ruby-300: hsl(0, 50%, 25%);
|
|
@@ -27,9 +27,66 @@
|
|
|
27
27
|
--navy-300: #092531;
|
|
28
28
|
}
|
|
29
29
|
|
|
30
|
-
|
|
30
|
+
/* Colors v.1 */
|
|
31
31
|
|
|
32
|
-
|
|
32
|
+
/* Tahoe City */
|
|
33
|
+
|
|
34
|
+
/* tanger and sand are in colobration with each other */
|
|
35
|
+
/* the light pinks dont work and the dark tans dont so it becomes a combination */
|
|
36
|
+
|
|
37
|
+
/* https://en.wikipedia.org/wiki/Western_tanager */
|
|
38
|
+
--tanager-100: oklch(0.55 0.2 25); /* this starts where 400 normally would */
|
|
39
|
+
--tanager-200: oklch(0.45 0.18 25);
|
|
40
|
+
--tanager-300: oklch(0.35 0.12 25);
|
|
41
|
+
--tanager-400: oklch(0.25 0.1 25);
|
|
42
|
+
|
|
43
|
+
@supports not (color: oklch(0.55 0.2 25)) {
|
|
44
|
+
--tanager-100: #cc272e;
|
|
45
|
+
--tanager-200: #a20519;
|
|
46
|
+
--tanager-300: #6c1517;
|
|
47
|
+
--tanager-400: #460105;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Sand */
|
|
51
|
+
|
|
52
|
+
--sand-100: oklch(0.97 0.01 50);
|
|
53
|
+
--sand-200: oklch(0.95 0.02 50);
|
|
54
|
+
--sand-300: oklch(0.92 0.03 50);
|
|
55
|
+
--sand-400: oklch(0.88 0.04 50);
|
|
56
|
+
/* this finishes where 500 normally would go dark */
|
|
57
|
+
|
|
58
|
+
@supports not (color: oklch(0.55 0.2 25)) {
|
|
59
|
+
--sand-100: #fbf3ef;
|
|
60
|
+
--sand-200: #faebe3;
|
|
61
|
+
--sand-300: #f6dfd3;
|
|
62
|
+
--sand-400: #eed1c1;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
/* South Tahoe */
|
|
66
|
+
/* Lake */
|
|
67
|
+
|
|
68
|
+
--lake-100: oklch(99% 0.001 230);
|
|
69
|
+
--lake-100: oklch(95% 0.03 230);
|
|
70
|
+
--lake-200: oklch(93% 0.04 230);
|
|
71
|
+
--lake-300: oklch(90% 0.055 230);
|
|
72
|
+
--lake-400: oklch(83% 0.08 230);
|
|
73
|
+
--lake-500: oklch(45% 0.085 230);
|
|
74
|
+
--lake-600: oklch(35% 0.065 230);
|
|
75
|
+
--lake-700: oklch(25% 0.05 230);
|
|
76
|
+
--lake-800: oklch(20% 0.035 230);
|
|
77
|
+
|
|
78
|
+
/* taken straight from sketch */
|
|
79
|
+
/* TODO: v1.2 do something to show these without duplicating the variables? */
|
|
80
|
+
@supports not (color: oklch(99% 0.001 230)) {
|
|
81
|
+
--lake-100: #f5fcff;
|
|
82
|
+
--lake-200: #ddf4fe;
|
|
83
|
+
--lake-300: #b8e7f9;
|
|
84
|
+
--lake-400: #8fd4ef;
|
|
85
|
+
--lake-500: #125e7d;
|
|
86
|
+
--lake-600: #073f55;
|
|
87
|
+
--lake-700: #022736;
|
|
88
|
+
--lake-800: #00151d;
|
|
89
|
+
}
|
|
33
90
|
|
|
34
91
|
/*------------------*/
|
|
35
92
|
/* #NEUTRALS */
|
|
@@ -44,7 +101,7 @@
|
|
|
44
101
|
--glow: 62.5%;
|
|
45
102
|
--light: 75%;
|
|
46
103
|
--bright: 87.5%;
|
|
47
|
-
--
|
|
104
|
+
--brilliance: 97.5%;
|
|
48
105
|
|
|
49
106
|
/* louie neutrals */
|
|
50
107
|
--black-metal: hsl(210, 25%, 2.5%);
|
|
@@ -57,15 +114,30 @@
|
|
|
57
114
|
--kingly-cloud: hsl(210, 18.75%, 87.5%);
|
|
58
115
|
--brilliance: hsl(210, 25%, 97.5%);
|
|
59
116
|
|
|
117
|
+
--neutral-100: #f9f9f9;
|
|
118
|
+
--neutral-200: #ebebeb;
|
|
119
|
+
--neutral-300: #d9d9d9;
|
|
120
|
+
--neutral-400: #bfbfbf;
|
|
121
|
+
--neutral-500: #404040;
|
|
122
|
+
--neutral-600: #262626;
|
|
123
|
+
--neutral-700: #121212;
|
|
124
|
+
--neutral-800: #050505;
|
|
125
|
+
|
|
126
|
+
/*------------------------------------*/
|
|
127
|
+
|
|
128
|
+
--card-radius: 0.25rem;
|
|
129
|
+
|
|
60
130
|
/*------------------*/
|
|
61
131
|
/* #TYPOGRAPHY */
|
|
62
132
|
/*------------------*/
|
|
63
133
|
|
|
64
134
|
--body_font: "Barlow", Arial, sans-serif;
|
|
65
135
|
--heading_font: "Barlow Condensed", Arial, sans-serif;
|
|
66
|
-
--font-serif: Georgia, serif; /* TODO: add serif font that matches nicely */
|
|
136
|
+
--font-serif: Georgia, serif; /* TODO: v.1.2 add serif font that matches nicely */
|
|
137
|
+
/* only used in testimonials its not a big deal for now */
|
|
67
138
|
|
|
68
139
|
/* 🏔 7 Summits */
|
|
140
|
+
/* linear scale */
|
|
69
141
|
--everest: 3rem; /* 29,035ft Asia */
|
|
70
142
|
--aconcagua: 2.5rem; /* 22,840ft South America */
|
|
71
143
|
--denali: 2rem; /* 20,320ft North America */
|
|
@@ -119,3 +191,42 @@
|
|
|
119
191
|
--fade: 0.2s var(--easing);
|
|
120
192
|
--slow: 0.5s var(--easing);
|
|
121
193
|
}
|
|
194
|
+
|
|
195
|
+
/* * this is specifically outside of :root */
|
|
196
|
+
/*------------------------------------*/
|
|
197
|
+
/* #PANELS */
|
|
198
|
+
/*------------------------------------*/
|
|
199
|
+
|
|
200
|
+
/* .panel-horizon
|
|
201
|
+
.panel-surface
|
|
202
|
+
.panel-breeze
|
|
203
|
+
.panel-cloud
|
|
204
|
+
.panel-storm
|
|
205
|
+
.panel-summit
|
|
206
|
+
.panel-aurora
|
|
207
|
+
.panel-cosmos */
|
|
208
|
+
|
|
209
|
+
.south-tahoe {
|
|
210
|
+
/* Panels are used to group content and provide visual separation */
|
|
211
|
+
/* * I'm not sure this is quite right but working on ideas */
|
|
212
|
+
/* .horizon { base level } */
|
|
213
|
+
/* Panels are used to group content and provide visual separation */
|
|
214
|
+
/* * I'm not sure this is quite right but working on ideas */
|
|
215
|
+
/* .horizon { base level } */
|
|
216
|
+
|
|
217
|
+
/* .cloud { floating, elevated content } */
|
|
218
|
+
--cloud-background-color: var(--lake-100);
|
|
219
|
+
--cloud-color: var(--lake-600);
|
|
220
|
+
--cloud-border-color: var(--lake-300);
|
|
221
|
+
|
|
222
|
+
--cloud-dark-background-color: var(--lake-800);
|
|
223
|
+
--cloud-dark-color: var(--lake-200);
|
|
224
|
+
|
|
225
|
+
/* .aurora { special, highlighted areas } */
|
|
226
|
+
/* --aurora-background-color: var(--neutral-100); */
|
|
227
|
+
--aurora-background-color: white;
|
|
228
|
+
--aurora-color: var(--neutral-600);
|
|
229
|
+
|
|
230
|
+
--aurora-dark-background-color: black;
|
|
231
|
+
--aurora-dark-color: var(--neutral-200);
|
|
232
|
+
}
|
|
@@ -1,13 +1,19 @@
|
|
|
1
1
|
/*------------------*/
|
|
2
2
|
/* #VISIBILITY */
|
|
3
3
|
/*------------------*/
|
|
4
|
+
.sr-only {
|
|
5
|
+
width: 0;
|
|
6
|
+
height: 0;
|
|
7
|
+
overflow: hidden;
|
|
8
|
+
display: block;
|
|
9
|
+
}
|
|
4
10
|
|
|
5
11
|
.pricing-chart__false {
|
|
6
12
|
display: none;
|
|
7
13
|
}
|
|
8
14
|
|
|
9
15
|
.menu__large {
|
|
10
|
-
padding-inline: var(--
|
|
16
|
+
padding-inline: var(--elbrus);
|
|
11
17
|
|
|
12
18
|
@media (max-width: 40rem) {
|
|
13
19
|
display: none;
|
|
@@ -42,3 +48,7 @@
|
|
|
42
48
|
display: none;
|
|
43
49
|
}
|
|
44
50
|
}
|
|
51
|
+
|
|
52
|
+
.storybook-show {
|
|
53
|
+
display: revert !important;
|
|
54
|
+
}
|
package/src/Button.tsx
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import * as React from "react"
|
|
2
|
-
|
|
3
|
-
interface ButtonTypes {
|
|
4
|
-
peek_base: string
|
|
5
|
-
strapiLocaleName: string
|
|
6
|
-
}
|
|
7
|
-
export const Button = ({ peek_base, strapiLocaleName }: ButtonTypes) =>
|
|
8
|
-
<a
|
|
9
|
-
href={peek_base}
|
|
10
|
-
rel="noopener noreferrer"
|
|
11
|
-
className="book-now"
|
|
12
|
-
title={`Book now with ${strapiLocaleName} kayak and paddleboard`}
|
|
13
|
-
>
|
|
14
|
-
BOOK NOW
|
|
15
|
-
</a>
|