Skip to content

Commit 5a1ae4c

Browse files
zhiyuanliang-mszhiyuanliang-ms
committed
add quote of the day example
1 parent 17fc778 commit 5a1ae4c

File tree

22 files changed

+6055
-0
lines changed

22 files changed

+6055
-0
lines changed

‎examples/quote-of-the-day/.env.temlate‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
# You can define environment variables in .env file and load them with 'dotenv' package.
2+
# This is a template of related environment variables in examples.
3+
# To use this file directly, please rename it to .env
4+
APPCONFIG_CONNECTION_STRING=<app-configuration-connection-string>
5+
APPLICATIONINSIGHTS_CONNECTION_STRING=<application-insights-connection-string>

‎examples/quote-of-the-day/client/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Quote of the Day</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/index.jsx"></script>
12+
</body>
13+
</html>

‎examples/quote-of-the-day/client/package.json‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "quoteoftheday",
3+
"type": "module",
4+
"scripts": {
5+
"build": "vite build --emptyOutDir"
6+
},
7+
"dependencies": {
8+
"react": "^18.3.1",
9+
"react-dom": "^18.3.1",
10+
"react-router-dom": "^6.27.0",
11+
"react-icons": "5.3.0"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-react": "^4.3.1",
15+
"vite": "^5.4.1"
16+
}
17+
}

‎examples/quote-of-the-day/client/src/App.css‎

Lines changed: 198 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,198 @@
1+
body {
2+
margin: 0;
3+
font-family: 'Georgia', serif;
4+
}
5+
6+
.quote-page {
7+
display: flex;
8+
flex-direction: column;
9+
min-height: 100vh;
10+
background-color: #f4f4f4;
11+
}
12+
13+
.navbar {
14+
background-color: white;
15+
border-bottom: 1px solid #eaeaea;
16+
display: flex;
17+
justify-content: space-between;
18+
padding: 10px 20px;
19+
align-items: center;
20+
font-family: 'Arial', sans-serif;
21+
font-size: 16px;
22+
}
23+
24+
.navbar-left {
25+
display: flex;
26+
align-items: center;
27+
margin-left: 40px;
28+
}
29+
30+
.logo {
31+
font-size: 1.25em;
32+
text-decoration: none;
33+
color: black;
34+
margin-right: 20px;
35+
}
36+
37+
.navbar-left nav a {
38+
margin-right: 20px;
39+
text-decoration: none;
40+
color: black;
41+
font-weight: 500;
42+
font-family: 'Arial', sans-serif;
43+
}
44+
45+
.navbar-right a {
46+
margin-left: 20px;
47+
text-decoration: none;
48+
color: black;
49+
font-weight: 500;
50+
font-family: 'Arial', sans-serif;
51+
}
52+
53+
.quote-container {
54+
display: flex;
55+
justify-content: center;
56+
align-items: center;
57+
flex-grow: 1;
58+
}
59+
60+
.quote-card {
61+
background-color: white;
62+
padding: 30px;
63+
border-radius: 8px;
64+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
65+
max-width: 700px;
66+
position: relative;
67+
text-align: left;
68+
}
69+
70+
.quote-card h2 {
71+
font-weight: normal;
72+
}
73+
74+
.quote-card blockquote {
75+
font-size: 2em;
76+
font-family: 'Georgia', serif;
77+
font-style: italic;
78+
color: #4EC2F7;
79+
margin: 0 0 20px 0;
80+
line-height: 1.4;
81+
text-align: left;
82+
}
83+
84+
.quote-card footer {
85+
font-size: 0.55em;
86+
color: black;
87+
font-family: 'Arial', sans-serif;
88+
font-style: normal;
89+
text-align: left;
90+
font-weight: bold;
91+
}
92+
93+
.vote-container {
94+
position: absolute;
95+
top: 10px;
96+
right: 10px;
97+
display: flex;
98+
gap: 0em;
99+
}
100+
101+
.heart-button {
102+
background-color: transparent;
103+
border: none;
104+
cursor: pointer;
105+
padding: 5px;
106+
font-size: 24px;
107+
}
108+
109+
.heart-button:hover {
110+
background-color: #F0F0F0;
111+
}
112+
113+
.heart-button:focus {
114+
outline: none;
115+
box-shadow: none;
116+
}
117+
118+
footer {
119+
background-color: white;
120+
padding-top: 10px;
121+
text-align: center;
122+
border-top: 1px solid #eaeaea;
123+
}
124+
125+
footer a {
126+
color: #4EC2F7;
127+
text-decoration: none;
128+
}
129+
130+
.register-login-card {
131+
width: 300px;
132+
margin: 50px auto;
133+
padding: 20px;
134+
border-radius: 8px;
135+
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
136+
background-color: #ffffff;
137+
text-align: center;
138+
}
139+
140+
h2 {
141+
margin-bottom: 20px;
142+
color: #333;
143+
}
144+
145+
.input-container {
146+
margin-bottom: 15px;
147+
text-align: left;
148+
width: 100%; /* Ensure the container takes the full width */
149+
}
150+
151+
label {
152+
display: block;
153+
margin-bottom: 5px;
154+
font-size: 14px;
155+
color: #555;
156+
}
157+
158+
input {
159+
width: calc(100%); /* Add padding for both left and right */
160+
padding: 10px;
161+
border-radius: 4px;
162+
border: 1px solid #ccc;
163+
font-size: 14px;
164+
box-sizing: border-box; /* Ensure padding doesn't affect the width */
165+
}
166+
167+
input:focus {
168+
outline: none;
169+
border-color: #007bff;
170+
}
171+
172+
.register-login-button {
173+
width: 100%;
174+
padding: 10px;
175+
background-color: #007bff;
176+
border: none;
177+
border-radius: 4px;
178+
color: white;
179+
font-size: 16px;
180+
cursor: pointer;
181+
margin-top: 10px;
182+
}
183+
184+
.register-login-button:hover {
185+
background-color: #0056b3;
186+
}
187+
188+
.error-message {
189+
color: red;
190+
}
191+
192+
.logout-btn {
193+
margin-left: 20px;
194+
background-color: transparent;
195+
border: none;
196+
cursor: pointer;
197+
font-size: 16px;
198+
}

‎examples/quote-of-the-day/client/src/App.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import React from "react";
5+
import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
6+
import { ContextProvider } from "./pages/AppContext";
7+
import Layout from "./Layout";
8+
import Home from "./pages/Home";
9+
import Privacy from "./pages/Privacy";
10+
import Register from "./pages/Register";
11+
import Login from "./pages/Login";
12+
13+
14+
function App() {
15+
return (
16+
<ContextProvider>
17+
<Router>
18+
<Layout>
19+
<Routes>
20+
<Route path="/" element={<Home />} />
21+
<Route path="/privacy" element={<Privacy />} />
22+
<Route path="/login" element={<Login />} />
23+
<Route path="/register" element={<Register />} />
24+
</Routes>
25+
</Layout>
26+
</Router>
27+
</ContextProvider>
28+
);
29+
}
30+
31+
export default App;

‎examples/quote-of-the-day/client/src/Layout.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import React from "react";
5+
import { useContext } from "react";
6+
import { Link, useNavigate } from "react-router-dom";
7+
import { AppContext } from "./pages/AppContext";
8+
9+
const Layout = ({ children }) => {
10+
const { currentUser, logoutUser } = useContext(AppContext);
11+
const navigate = useNavigate();
12+
13+
const handleLogout = () => {
14+
logoutUser();
15+
navigate("/");
16+
};
17+
18+
return (
19+
<div className="quote-page">
20+
<header className="navbar">
21+
<div className="navbar-left">
22+
<Link to="/" className="logo">QuoteOfTheDay</Link>
23+
<nav>
24+
<Link to="/">Home</Link>
25+
<Link to="/privacy">Privacy</Link>
26+
</nav>
27+
</div>
28+
<div className="navbar-right">
29+
{currentUser ?
30+
(
31+
<>
32+
<span>Hello, {currentUser}!</span>
33+
<button onClick={handleLogout} className="logout-btn">Logout</button>
34+
</>
35+
) :
36+
(
37+
<>
38+
<Link to="/register">Register</Link>
39+
<Link to="/login">Login</Link>
40+
</>
41+
)
42+
}
43+
</div>
44+
</header>
45+
46+
<main className="quote-container">
47+
{children}
48+
</main>
49+
50+
<footer>
51+
<p>&copy; 2024 - QuoteOfTheDay - <Link to="/privacy">Privacy</Link></p>
52+
</footer>
53+
</div>
54+
);
55+
};
56+
57+
export default Layout;

‎examples/quote-of-the-day/client/src/index.jsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import React from "react";
5+
import ReactDOM from "react-dom/client";
6+
import App from "./App";
7+
import "./App.css";
8+
9+
window.addEventListener("beforeunload", (event) => {
10+
// clear the localStorage when the user leaves the page
11+
localStorage.clear()
12+
});
13+
14+
const root = ReactDOM.createRoot(document.getElementById("root"));
15+
root.render(
16+
<React.StrictMode>
17+
<App />
18+
</React.StrictMode>
19+
);

‎examples/quote-of-the-day/client/src/pages/AppContext.jsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Copyright (c) Microsoft Corporation.
2+
// Licensed under the MIT license.
3+
4+
import React from "react";
5+
import { createContext, useState } from "react";
6+
7+
export const AppContext = createContext();
8+
9+
export const ContextProvider = ({ children }) => {
10+
const [currentUser, setCurrentUser] = useState(undefined);
11+
12+
13+
const loginUser = (user) => {
14+
setCurrentUser(user);
15+
};
16+
17+
const logoutUser = () => {
18+
setCurrentUser(undefined);
19+
};
20+
21+
return (
22+
<AppContext.Provider value={{ currentUser, loginUser, logoutUser }}>
23+
{children}
24+
</AppContext.Provider>
25+
);
26+
};

0 commit comments

Comments
 (0)