Skip to content

Commit 080a799

Browse files
kai11kai11
committed
Example app migrated to react19, nextjs 15 and app page router
1 parent 8051760 commit 080a799

25 files changed

Lines changed: 4817 additions & 2229 deletions

website/public/apple-touch-icon-76-76.png renamed to website/app/apple-icon1.png

File renamed without changes.

website/public/apple-touch-icon-120-120.png renamed to website/app/apple-icon2.png

File renamed without changes.

website/public/apple-touch-icon-152-152.png renamed to website/app/apple-icon3.png

File renamed without changes.

website/public/apple-touch-icon-167-167.png renamed to website/app/apple-icon4.png

File renamed without changes.

website/public/apple-touch-icon-180-180.png renamed to website/app/apple-icon5.png

File renamed without changes.

website/pages/chatwoot.tsx renamed to website/app/chatwoot/page.tsx

Lines changed: 8 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,12 @@
1+
'use client';
12
import React from 'react'
23
import { LiveChatLoaderProvider, Chatwoot } from 'react-live-chat-loader'
3-
import type { NextPage } from 'next'
4+
import ExampleLinks from '../../components/exampleLinks'
45

5-
import Layout from '../layouts/main'
6-
import ExampleLinks from '../components/exampleLinks'
6+
export default function ChatwootPage() {
7+
return (
8+
<LiveChatLoaderProvider provider="chatwoot" providerKey="E33wn9ftxMDHZx18AaBkfPvY">
79

8-
const Page: NextPage = () => (
9-
<LiveChatLoaderProvider
10-
provider="chatwoot"
11-
providerKey="E33wn9ftxMDHZx18AaBkfPvY"
12-
>
13-
<Layout title="React Live Chat Loader: Chatwoot">
1410
<div className="wrapper">
1511
<div className="inner">
1612
<h1>React Live Chat Loader: Chatwoot</h1>
@@ -26,8 +22,7 @@ const Page: NextPage = () => (
2622
</div>
2723
</div>
2824
<Chatwoot />
29-
</Layout>
30-
</LiveChatLoaderProvider>
31-
)
3225

33-
export default Page
26+
</LiveChatLoaderProvider>
27+
)
28+
}

website/pages/drift.tsx renamed to website/app/drift/page.tsx

Lines changed: 9 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,17 @@
1+
'use client';
12
import React from 'react'
23
import { LiveChatLoaderProvider, Drift } from 'react-live-chat-loader'
3-
import type { NextPage } from 'next'
4+
import ExampleLinks from '../../components/exampleLinks'
45

5-
import Layout from '../layouts/main'
6-
import ExampleLinks from '../components/exampleLinks'
6+
export default function ChatwootPage() {
7+
return (
8+
<LiveChatLoaderProvider provider="drift" providerKey="fv5fpb4nmax7">
79

8-
const Page: NextPage = () => (
9-
<LiveChatLoaderProvider provider="drift" providerKey="fv5fpb4nmax7">
10-
<Layout title="React Live Chat Loader: Drift">
1110
<div className="wrapper">
1211
<div className="inner">
1312
<h1>React Live Chat Loader: Drift</h1>
1413
<p>
15-
This is an example implementation of the Drift chat widget using{' '}
14+
This is an example implementation of the Drift widget using{' '}
1615
<a href="https://github.com/calibreapp/react-live-chat-loader">
1716
react-live-chat-loader
1817
</a>
@@ -23,8 +22,7 @@ const Page: NextPage = () => (
2322
</div>
2423
</div>
2524
<Drift icon="A" color="#0176ff" />
26-
</Layout>
27-
</LiveChatLoaderProvider>
28-
)
2925

30-
export default Page
26+
</LiveChatLoaderProvider>
27+
)
28+
}

website/public/favicon.ico renamed to website/app/favicon.ico

File renamed without changes.

website/pages/front.tsx renamed to website/app/front/page.tsx

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,17 @@
1+
'use client';
12
import React from 'react'
23
import { LiveChatLoaderProvider, Front } from 'react-live-chat-loader'
3-
import type { NextPage } from 'next'
4+
import ExampleLinks from '../../components/exampleLinks'
45

5-
import Layout from '../layouts/main'
6-
import ExampleLinks from '../components/exampleLinks'
6+
export default function FrontPage() {
7+
return (
8+
<LiveChatLoaderProvider provider="front" providerKey="b2b8dcd0c63c934d363e6704cfa6af86">
79

8-
const Page: NextPage = () => (
9-
<LiveChatLoaderProvider
10-
provider="front"
11-
providerKey="b2b8dcd0c63c934d363e6704cfa6af86"
12-
>
13-
<Layout title="React Live Chat Loader: Front">
1410
<div className="wrapper">
1511
<div className="inner">
1612
<h1>React Live Chat Loader: Front</h1>
1713
<p>
18-
This is an example implementation of the Front chat widget using{' '}
14+
This is an example implementation of the Front widget using{' '}
1915
<a href="https://github.com/calibreapp/react-live-chat-loader">
2016
react-live-chat-loader
2117
</a>
@@ -26,8 +22,7 @@ const Page: NextPage = () => (
2622
</div>
2723
</div>
2824
<Front />
29-
</Layout>
30-
</LiveChatLoaderProvider>
31-
)
3225

33-
export default Page
26+
</LiveChatLoaderProvider>
27+
)
28+
}

‎website/app/globals.css‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
body {
2+
background-color: #041452;
3+
color: white;
4+
font-size: 16px;
5+
line-height: 1.5;
6+
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica,
7+
Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji',
8+
'Segoe UI Symbol';
9+
height: 100vh;
10+
margin: 0;
11+
padding: 0;
12+
width: 100%;
13+
-webkit-text-size-adjust: 100%;
14+
-webkit-font-smoothing: antialiased;
15+
}
16+
.wrapper {
17+
align-items: center;
18+
display: flex;
19+
height: 100vh;
20+
}
21+
.inner {
22+
margin: auto;
23+
max-width: 700px;
24+
padding: 15px;
25+
}
26+
h1 {
27+
font-size: 36px;
28+
}
29+
a {
30+
color: white;
31+
font-weight: bold;
32+
text-decoration: none;
33+
}
34+
a span {
35+
display: inline-block;
36+
transition: margin 0.1s ease-out;
37+
}
38+
a:hover span {
39+
margin-left: 5px;
40+
}

0 commit comments

Comments
 (0)