Final version of example, has save form and table of sales, supporting relationships and pagination all from Postgres.
This commit is contained in:
mike12345567
parent
4dc9bab2de
commit
c51352c9bf
43
examples/nextjs-api-sales/components/layout.tsx
Normal file
43
examples/nextjs-api-sales/components/layout.tsx
Normal file
|
|
@ -0,0 +1,43 @@
|
|||
import Link from "next/link"
|
||||
import Image from "next/image"
|
||||
import { ReactNotifications } from "react-notifications-component"
|
||||
|
||||
function layout(props: any) {
|
||||
return (
|
||||
<>
|
||||
<nav className="navbar" role="navigation" aria-label="main navigation">
|
||||
<div id="navbar" className="navbar-menu">
|
||||
<div className="logo">
|
||||
<Image src="/bb-emblem.svg" width="50" height="50" />
|
||||
</div>
|
||||
<div className="navbar-start">
|
||||
<Link href="/">
|
||||
<a className="navbar-item">
|
||||
Home
|
||||
</a>
|
||||
</Link>
|
||||
<Link href="/save">
|
||||
<a className="navbar-item">
|
||||
Save
|
||||
</a>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
<div className="navbar-end">
|
||||
<div className="navbar-item">
|
||||
<div className="buttons">
|
||||
<a className="button is-primary" href="https://budibase.readme.io/reference">
|
||||
<strong>API Documentation</strong>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
<ReactNotifications />
|
||||
{props.children}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export default layout
|
||||
28
examples/nextjs-api-sales/components/notifications.ts
Normal file
28
examples/nextjs-api-sales/components/notifications.ts
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { Store } from "react-notifications-component"
|
||||
|
||||
const notifications = {
|
||||
error: (error: string, title: string) => {
|
||||
Store.addNotification({
|
||||
container: "top-right",
|
||||
type: "danger",
|
||||
message: error,
|
||||
title: title,
|
||||
dismiss: {
|
||||
duration: 10000,
|
||||
}
|
||||
})
|
||||
},
|
||||
success: (message: string, title: string) => {
|
||||
Store.addNotification({
|
||||
container: "top-right",
|
||||
type: "success",
|
||||
message: message,
|
||||
title: title,
|
||||
dismiss: {
|
||||
duration: 3000,
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
export default notifications
|
||||
70
examples/nextjs-api-sales/components/utils.ts
Normal file
70
examples/nextjs-api-sales/components/utils.ts
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
import { App, AppSearch, Table, TableSearch } from "../definitions"
|
||||
import getConfig from "next/config"
|
||||
|
||||
const { serverRuntimeConfig } = getConfig()
|
||||
const apiKey = serverRuntimeConfig["apiKey"]
|
||||
const appName = serverRuntimeConfig["appName"]
|
||||
const host = serverRuntimeConfig["host"]
|
||||
|
||||
let APP: App | null = null
|
||||
let TABLES: { [key: string]: Table } = {}
|
||||
|
||||
export async function makeCall(method: string, url: string, opts?: { body?: any, appId?: string }): Promise<any> {
|
||||
const fetchOpts: any = {
|
||||
method,
|
||||
headers: {
|
||||
"x-budibase-api-key": apiKey,
|
||||
}
|
||||
}
|
||||
if (opts?.appId) {
|
||||
fetchOpts.headers["x-budibase-app-id"] = opts.appId
|
||||
}
|
||||
if (opts?.body) {
|
||||
fetchOpts.body = typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
|
||||
fetchOpts.headers["Content-Type"] = "application/json"
|
||||
}
|
||||
const finalUrl = `${host}/api/public/v1/${url}`
|
||||
const response = await fetch(finalUrl, fetchOpts)
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
} else {
|
||||
const error = await response.text()
|
||||
console.error("Budibase server error - ", error)
|
||||
throw new Error(error)
|
||||
}
|
||||
}
|
||||
|
||||
export async function getApp(): Promise<App> {
|
||||
if (APP) {
|
||||
return APP
|
||||
}
|
||||
const apps: AppSearch = await makeCall("post", "applications/search", {
|
||||
body: {
|
||||
name: appName,
|
||||
}
|
||||
})
|
||||
const app = apps.data.find((app: App) => app.name === appName)
|
||||
if (!app) {
|
||||
throw new Error("Could not find app, please make sure app name in config is correct.")
|
||||
}
|
||||
APP = app
|
||||
return app
|
||||
}
|
||||
|
||||
export async function findTable(appId: string, tableName: string): Promise<Table> {
|
||||
if (TABLES[tableName]) {
|
||||
return TABLES[tableName]
|
||||
}
|
||||
const tables: TableSearch = await makeCall("post", "tables/search", {
|
||||
body: {
|
||||
name: tableName,
|
||||
},
|
||||
appId,
|
||||
})
|
||||
const table = tables.data.find((table: Table) => table.name === tableName)
|
||||
if (!table) {
|
||||
throw new Error("Could not find table, please make sure your app is configured with the Postgres datasource correctly.")
|
||||
}
|
||||
TABLES[tableName] = table
|
||||
return table
|
||||
}
|
||||
|
|
@ -1,23 +1,21 @@
|
|||
CREATE TABLE IF NOT EXISTS sales_people (
|
||||
person_id INT NOT NULL,
|
||||
name varchar(200) NOT NULL,
|
||||
PRIMARY KEY (person_id)
|
||||
person_id SERIAL PRIMARY KEY,
|
||||
name varchar(200) NOT NULL
|
||||
);
|
||||
|
||||
CREATE TABLE IF NOT EXISTS sales (
|
||||
sale_id INT NOT NULL,
|
||||
sale_id SERIAL PRIMARY KEY,
|
||||
sale_name varchar(200) NOT NULL,
|
||||
sold_by INT,
|
||||
PRIMARY KEY (sale_id),
|
||||
CONSTRAINT sold_by_fk
|
||||
FOREIGN KEY(sold_by)
|
||||
REFERENCES sales_people(person_id)
|
||||
);
|
||||
|
||||
INSERT INTO sales_people
|
||||
select id, concat('Sales person ', id)
|
||||
INSERT INTO sales_people (name)
|
||||
select 'Salesperson ' || id
|
||||
FROM GENERATE_SERIES(1, 50) as id;
|
||||
|
||||
INSERT INTO sales
|
||||
select id, concat('Sale ', id), floor(random() * 50 + 1)::int
|
||||
FROM GENERATE_SERIES(1, 200) as id;
|
||||
INSERT INTO sales (sale_name, sold_by)
|
||||
select 'Sale ' || id, floor(random() * 50 + 1)::int
|
||||
FROM GENERATE_SERIES(1, 200) as id;
|
||||
|
|
|
|||
|
|
@ -14,7 +14,8 @@
|
|||
"node-fetch": "^3.2.2",
|
||||
"node-sass": "^7.0.1",
|
||||
"react": "17.0.2",
|
||||
"react-dom": "17.0.2"
|
||||
"react-dom": "17.0.2",
|
||||
"react-notifications-component": "^3.4.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/node": "17.0.21",
|
||||
|
|
|
|||
|
|
@ -1,8 +1,13 @@
|
|||
import "../styles/global.sass"
|
||||
import type { AppProps } from "next/app"
|
||||
import Layout from "../components/layout"
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
return <Component {...pageProps} />
|
||||
return (
|
||||
<Layout>
|
||||
<Component {...pageProps} />
|
||||
</Layout>
|
||||
)
|
||||
}
|
||||
|
||||
export default MyApp
|
||||
|
|
|
|||
|
|
@ -1,73 +1,4 @@
|
|||
import getConfig from "next/config"
|
||||
import {App, AppSearch, Table, TableSearch} from "../../definitions"
|
||||
|
||||
const { serverRuntimeConfig } = getConfig()
|
||||
const apiKey = serverRuntimeConfig["apiKey"]
|
||||
const appName = serverRuntimeConfig["appName"]
|
||||
const host = serverRuntimeConfig["host"]
|
||||
|
||||
let APP: App | null = null
|
||||
let TABLES: { [key: string]: Table } = {}
|
||||
|
||||
async function makeCall(method: string, url: string, opts?: { body?: any, appId?: string }): Promise<any> {
|
||||
const fetchOpts: any = {
|
||||
method,
|
||||
headers: {
|
||||
"x-budibase-api-key": apiKey,
|
||||
}
|
||||
}
|
||||
if (opts?.appId) {
|
||||
fetchOpts.headers["x-budibase-app-id"] = opts.appId
|
||||
}
|
||||
if (opts?.body) {
|
||||
fetchOpts.body = typeof opts.body !== "string" ? JSON.stringify(opts.body) : opts.body
|
||||
fetchOpts.headers["Content-Type"] = "application/json"
|
||||
}
|
||||
const finalUrl = `${host}/api/public/v1/${url}`
|
||||
const response = await fetch(finalUrl, fetchOpts)
|
||||
if (response.ok) {
|
||||
return response.json()
|
||||
} else {
|
||||
const error = await response.text()
|
||||
console.error("Budibase server error - ", error)
|
||||
throw new Error(error)
|
||||
}
|
||||
}
|
||||
|
||||
async function getApp(): Promise<App> {
|
||||
if (APP) {
|
||||
return APP
|
||||
}
|
||||
const apps: AppSearch = await makeCall("post", "applications/search", {
|
||||
body: {
|
||||
name: appName,
|
||||
}
|
||||
})
|
||||
const app = apps.data.find((app: App) => app.name === appName)
|
||||
if (!app) {
|
||||
throw new Error("Could not find app, please make sure app name in config is correct.")
|
||||
}
|
||||
APP = app
|
||||
return app
|
||||
}
|
||||
|
||||
async function findTable(appId: string, tableName: string): Promise<Table> {
|
||||
if (TABLES[tableName]) {
|
||||
return TABLES[tableName]
|
||||
}
|
||||
const tables: TableSearch = await makeCall("post", "tables/search", {
|
||||
body: {
|
||||
name: tableName,
|
||||
},
|
||||
appId,
|
||||
})
|
||||
const table = tables.data.find((table: Table) => table.name === tableName)
|
||||
if (!table) {
|
||||
throw new Error("Could not find table, please make sure your app is configured with the Postgres datasource correctly.")
|
||||
}
|
||||
TABLES[tableName] = table
|
||||
return table
|
||||
}
|
||||
import { getApp, findTable, makeCall } from "../../components/utils"
|
||||
|
||||
async function getSales(req: any) {
|
||||
const { page } = req.query
|
||||
|
|
@ -79,7 +10,7 @@ async function getSales(req: any) {
|
|||
limit: 10,
|
||||
sort: {
|
||||
type: "string",
|
||||
order: "ascending",
|
||||
order: "descending",
|
||||
column: "sale_id",
|
||||
},
|
||||
paginate: true,
|
||||
|
|
|
|||
31
examples/nextjs-api-sales/pages/api/salespeople.ts
Normal file
31
examples/nextjs-api-sales/pages/api/salespeople.ts
Normal file
|
|
@ -0,0 +1,31 @@
|
|||
import { getApp, findTable, makeCall } from "../../components/utils"
|
||||
|
||||
async function getSalespeople() {
|
||||
const { _id: appId } = await getApp()
|
||||
const table = await findTable(appId, "sales_people")
|
||||
return await makeCall("post", `tables/${table._id}/rows/search`, {
|
||||
appId,
|
||||
body: {
|
||||
sort: {
|
||||
type: "string",
|
||||
order: "ascending",
|
||||
column: "person_id",
|
||||
},
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default async function handler(req: any, res: any) {
|
||||
let response: any = {}
|
||||
try {
|
||||
if (req.method === "GET") {
|
||||
response = await getSalespeople()
|
||||
} else {
|
||||
res.status(404)
|
||||
return
|
||||
}
|
||||
res.status(200).json(response)
|
||||
} catch (err: any) {
|
||||
res.status(400).send(err)
|
||||
}
|
||||
}
|
||||
|
|
@ -1,61 +1,81 @@
|
|||
import type { NextPage } from "next"
|
||||
import styles from "../styles/home.module.css"
|
||||
import { useState, useEffect } from "react"
|
||||
import { useState, useEffect, useCallback } from "react"
|
||||
import Notifications from "../components/notifications"
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const [sales, setSales] = useState([])
|
||||
const [currentPage, setCurrentPage] = useState(1)
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
const getSales = async (page: Number = 1) => {
|
||||
const getSales = useCallback(async (page: Number = 1) => {
|
||||
let url = "/api/sales"
|
||||
if (page) {
|
||||
url += `?page=${page}`
|
||||
}
|
||||
const response = await fetch(url)
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text())
|
||||
const error = await response.text()
|
||||
Notifications.error(error, "Failed to get sales")
|
||||
return
|
||||
}
|
||||
const sales = await response.json()
|
||||
// @ts-ignore
|
||||
setCurrentPage(page)
|
||||
return setSales(sales.data)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const saveSale = async () => {
|
||||
const response = await fetch("/api/sales", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify({}),
|
||||
})
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text())
|
||||
}
|
||||
}
|
||||
|
||||
const goToNextPage = async () => {
|
||||
const goToNextPage = useCallback(async () => {
|
||||
await getSales(currentPage + 1)
|
||||
}
|
||||
}, [currentPage, getSales])
|
||||
|
||||
const goToPrevPage = async () => {
|
||||
const goToPrevPage = useCallback(async () => {
|
||||
if (currentPage > 1) {
|
||||
await getSales(currentPage - 1)
|
||||
}
|
||||
}
|
||||
}, [currentPage, getSales])
|
||||
|
||||
useEffect(() => {
|
||||
getSales().catch(() => {
|
||||
getSales().then(() => {
|
||||
setLoaded(true)
|
||||
}).catch(() => {
|
||||
setSales([])
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (!loaded) {
|
||||
return null
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<h1 className="subtitle">Sales</h1>
|
||||
<div>{sales.map((sale: any) => <p key={sale.sale_id}>{sale.sale_id}</p>)}</div>
|
||||
<button onClick={goToPrevPage}>Prev Page</button>
|
||||
<button onClick={goToNextPage}>Next Page</button>
|
||||
<div className={styles.tableSection}>
|
||||
<h1 className="subtitle">Sales</h1>
|
||||
<div className={styles.table}>
|
||||
<table className="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Sale ID</th>
|
||||
<th>name</th>
|
||||
<th>Sold by</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{sales.map((sale: any) =>
|
||||
<tr key={sale.sale_id}>
|
||||
<th>{sale.sale_id}</th>
|
||||
<th>{sale.sale_name}</th>
|
||||
<th>{sale.sales_people?.map((person: any) => person.primaryDisplay)[0]}</th>
|
||||
</tr>
|
||||
)}
|
||||
</tbody>
|
||||
</table>
|
||||
<div className={styles.buttons}>
|
||||
<button className="button" onClick={goToPrevPage}>Prev Page</button>
|
||||
<button className="button" onClick={goToNextPage}>Next Page</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
81
examples/nextjs-api-sales/pages/save.tsx
Normal file
81
examples/nextjs-api-sales/pages/save.tsx
Normal file
|
|
@ -0,0 +1,81 @@
|
|||
import type { NextPage } from "next"
|
||||
import { useCallback, useEffect, useState } from "react"
|
||||
import styles from "../styles/save.module.css"
|
||||
import Notifications from "../components/notifications"
|
||||
|
||||
const Save: NextPage = () => {
|
||||
const [salespeople, setSalespeople] = useState([])
|
||||
const [loaded, setLoaded] = useState(false)
|
||||
|
||||
const saveSale = useCallback(async (event: any) => {
|
||||
event.preventDefault()
|
||||
const sale = {
|
||||
sale_name: event.target.name.value,
|
||||
sales_person: [event.target.soldBy.value],
|
||||
}
|
||||
const response = await fetch("/api/sales", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
body: JSON.stringify(sale),
|
||||
})
|
||||
if (!response.ok) {
|
||||
const error = await response.text()
|
||||
Notifications.error(error, "Failed to save sale")
|
||||
return
|
||||
}
|
||||
Notifications.success("Sale saved successfully!", "Sale saved")
|
||||
}, [])
|
||||
|
||||
const getSalespeople = useCallback(async () => {
|
||||
const response: any = await fetch("/api/salespeople")
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text())
|
||||
}
|
||||
const json = await response.json()
|
||||
setSalespeople(json.data)
|
||||
}, [])
|
||||
|
||||
useEffect(() => {
|
||||
getSalespeople().then(() => {
|
||||
setLoaded(true)
|
||||
}).catch(() => {
|
||||
setSalespeople([])
|
||||
})
|
||||
}, [])
|
||||
|
||||
if (!loaded) {
|
||||
return null
|
||||
}
|
||||
return (
|
||||
<div className={styles.container}>
|
||||
<div className={styles.formSection}>
|
||||
<h1 className="subtitle">New sale</h1>
|
||||
<form onSubmit={saveSale}>
|
||||
<div className="field">
|
||||
<label className="label">Name</label>
|
||||
<div className="control">
|
||||
<input id="name" className="input" type="text" placeholder="Text input" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="field">
|
||||
<label className="label">Sold by</label>
|
||||
<div className="control">
|
||||
<div className="select">
|
||||
<select id="soldBy">
|
||||
{salespeople.map((person: any) => <option key={person._id} value={person._id}>{person.name}</option>)}
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="control">
|
||||
<button className="button is-link">Submit</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default Save
|
||||
80
examples/nextjs-api-sales/public/bb-emblem.svg
Normal file
80
examples/nextjs-api-sales/public/bb-emblem.svg
Normal file
|
|
@ -0,0 +1,80 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 48 48" style="enable-background:new 0 0 48 48;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#393C44;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
.st2{fill:#4285F4;}
|
||||
</style>
|
||||
<rect x="-152.17" y="-24.17" class="st0" width="96.17" height="96.17"/>
|
||||
<path class="st1" d="M-83.19,48h-41.79c-1.76,0-3.19-1.43-3.19-3.19V3.02c0-1.76,1.43-3.19,3.19-3.19h41.79
|
||||
c1.76,0,3.19,1.43,3.19,3.19v41.79C-80,46.57-81.43,48-83.19,48z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st0" d="M-99.62,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35h-4.89V12.57H-99.62z
|
||||
M-93.46,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C-93.55,28.92-93.46,28.52-93.46,28.11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M-114.76,12.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58
|
||||
c0.86,0.39,1.59,0.91,2.19,1.57c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89
|
||||
c-0.35,0.9-0.84,1.68-1.47,2.35c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V35
|
||||
h-4.89V12.57H-114.76z M-108.6,28.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C-108.68,28.92-108.6,28.52-108.6,28.11z"/>
|
||||
</g>
|
||||
</g>
|
||||
<path class="st2" d="M44.81,159H3.02c-1.76,0-3.19-1.43-3.19-3.19v-41.79c0-1.76,1.43-3.19,3.19-3.19h41.79
|
||||
c1.76,0,3.19,1.43,3.19,3.19v41.79C48,157.57,46.57,159,44.81,159z"/>
|
||||
<g>
|
||||
<g>
|
||||
<path class="st1" d="M28.38,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146h-4.89v-22.43H28.38z
|
||||
M34.54,139.11c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69
|
||||
c-0.38-0.17-0.79-0.26-1.24-0.26c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01
|
||||
c-0.17,0.39-0.26,0.8-0.26,1.23c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68
|
||||
c0.39,0.17,0.8,0.26,1.23,0.26c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1
|
||||
C34.45,139.92,34.54,139.52,34.54,139.11z"/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M13.24,123.57v9.94c1.15-1.21,2.59-1.81,4.32-1.81c1.03,0,1.97,0.19,2.82,0.58c0.86,0.39,1.59,0.91,2.19,1.57
|
||||
c0.6,0.66,1.08,1.43,1.42,2.32c0.34,0.89,0.51,1.84,0.51,2.85c0,1.03-0.18,1.99-0.53,2.89c-0.35,0.9-0.84,1.68-1.47,2.35
|
||||
c-0.63,0.67-1.37,1.19-2.23,1.58c-0.86,0.39-1.78,0.58-2.77,0.58c-1.8,0-3.22-0.66-4.27-1.97V146H8.35v-22.43H13.24z M19.4,139.11
|
||||
c0-0.43-0.08-0.84-0.24-1.23c-0.16-0.39-0.39-0.72-0.68-1.01c-0.29-0.29-0.62-0.52-1-0.69c-0.38-0.17-0.79-0.26-1.24-0.26
|
||||
c-0.43,0-0.84,0.08-1.22,0.24c-0.38,0.16-0.71,0.39-0.99,0.68c-0.28,0.29-0.5,0.63-0.68,1.01c-0.17,0.39-0.26,0.8-0.26,1.23
|
||||
c0,0.43,0.08,0.84,0.24,1.22c0.16,0.38,0.39,0.71,0.68,0.99c0.29,0.28,0.63,0.5,1.01,0.68c0.39,0.17,0.8,0.26,1.23,0.26
|
||||
c0.43,0,0.84-0.08,1.22-0.24c0.38-0.16,0.71-0.39,0.99-0.68c0.28-0.29,0.5-0.62,0.68-1C19.32,139.92,19.4,139.52,19.4,139.11z"/>
|
||||
</g>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st0" d="M44,48H4c-2.21,0-4-1.79-4-4V4c0-2.21,1.79-4,4-4h40c2.21,0,4,1.79,4,4v40C48,46.21,46.21,48,44,48z"/>
|
||||
<g>
|
||||
<path class="st1" d="M28.48,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
|
||||
c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
|
||||
c-0.64,0.7-1.4,1.25-2.28,1.66C34.8,35.8,33.86,36,32.84,36c-1.84,0-3.3-0.69-4.37-2.07v1.62h-5V12H28.48z M34.78,28.31
|
||||
c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
|
||||
c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
|
||||
s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
|
||||
c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C34.69,29.16,34.78,28.75,34.78,28.31z"
|
||||
/>
|
||||
</g>
|
||||
<g>
|
||||
<path class="st1" d="M13,12v10.44c1.18-1.27,2.65-1.9,4.42-1.9c1.05,0,2.01,0.2,2.89,0.61c0.87,0.41,1.62,0.96,2.24,1.65
|
||||
c0.62,0.69,1.1,1.5,1.45,2.44c0.35,0.94,0.52,1.93,0.52,2.99c0,1.08-0.18,2.09-0.54,3.04c-0.36,0.95-0.86,1.77-1.51,2.47
|
||||
c-0.64,0.7-1.4,1.25-2.28,1.66C19.32,35.8,18.38,36,17.37,36c-1.84,0-3.3-0.69-4.37-2.07v1.62H8V12H13z M19.3,28.31
|
||||
c0-0.45-0.08-0.88-0.25-1.29c-0.17-0.41-0.4-0.76-0.69-1.06c-0.3-0.3-0.64-0.54-1.02-0.72c-0.39-0.18-0.81-0.27-1.27-0.27
|
||||
c-0.44,0-0.86,0.09-1.24,0.26c-0.39,0.17-0.72,0.41-1.01,0.71c-0.29,0.3-0.52,0.66-0.69,1.06c-0.18,0.41-0.26,0.84-0.26,1.29
|
||||
s0.08,0.88,0.25,1.28c0.17,0.4,0.4,0.74,0.69,1.04c0.29,0.29,0.64,0.53,1.04,0.71c0.4,0.18,0.82,0.27,1.26,0.27
|
||||
c0.44,0,0.86-0.09,1.24-0.26c0.39-0.17,0.72-0.41,1.01-0.71c0.29-0.3,0.52-0.65,0.69-1.05C19.21,29.16,19.3,28.75,19.3,28.31z"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.1 KiB |
|
|
@ -1,4 +0,0 @@
|
|||
<svg width="283" height="64" viewBox="0 0 283 64" fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M141.04 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.46 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM248.72 16c-11.04 0-19 7.2-19 18s8.96 18 20 18c6.67 0 12.55-2.64 16.19-7.09l-7.65-4.42c-2.02 2.21-5.09 3.5-8.54 3.5-4.79 0-8.86-2.5-10.37-6.5h28.02c.22-1.12.35-2.28.35-3.5 0-10.79-7.96-17.99-19-17.99zm-9.45 14.5c1.25-3.99 4.67-6.5 9.45-6.5 4.79 0 8.21 2.51 9.45 6.5h-18.9zM200.24 34c0 6 3.92 10 10 10 4.12 0 7.21-1.87 8.8-4.92l7.68 4.43c-3.18 5.3-9.14 8.49-16.48 8.49-11.05 0-19-7.2-19-18s7.96-18 19-18c7.34 0 13.29 3.19 16.48 8.49l-7.68 4.43c-1.59-3.05-4.68-4.92-8.8-4.92-6.07 0-10 4-10 10zm82.48-29v46h-9V5h9zM36.95 0L73.9 64H0L36.95 0zm92.38 5l-27.71 48L73.91 5H84.3l17.32 30 17.32-30h10.39zm58.91 12v9.69c-1-.29-2.06-.49-3.2-.49-5.81 0-10 4-10 10V51h-9V17h9v9.2c0-5.08 5.91-9.2 13.2-9.2z" fill="#000"/>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 1.1 KiB |
|
|
@ -1,12 +1,25 @@
|
|||
@charset "utf-8"
|
||||
|
||||
// Import a Google Font
|
||||
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700')
|
||||
|
||||
$family-sans-serif: "Roboto", sans-serif
|
||||
//$grey-dark: color
|
||||
//$grey-light: color
|
||||
//$primary: color
|
||||
//$link: color
|
||||
|
||||
@import "../node_modules/bulma/bulma.sass"
|
||||
#__next
|
||||
display: flex
|
||||
flex-direction: column
|
||||
justify-content: flex-start
|
||||
align-items: stretch
|
||||
height: 100vh
|
||||
|
||||
.logo
|
||||
padding: 0.75rem
|
||||
|
||||
@import "../node_modules/bulma/bulma.sass"
|
||||
@import "../node_modules/react-notifications-component/dist/theme.css"
|
||||
|
||||
// applied after bulma styles are enabled
|
||||
html
|
||||
overflow-y: auto
|
||||
|
||||
.navbar
|
||||
background-color: #D3D3D3
|
||||
color: white
|
||||
|
|
@ -1,116 +1,30 @@
|
|||
.container {
|
||||
padding: 0 2rem;
|
||||
}
|
||||
|
||||
.main {
|
||||
min-height: 100vh;
|
||||
padding: 4rem 0;
|
||||
flex: 1;
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
padding: 5rem 2rem 0;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.footer {
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
padding: 2rem 0;
|
||||
border-top: 1px solid #eaeaea;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.footer a {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.title a {
|
||||
color: #0070f3;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.title a:hover,
|
||||
.title a:focus,
|
||||
.title a:active {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0;
|
||||
line-height: 1.15;
|
||||
font-size: 4rem;
|
||||
}
|
||||
|
||||
.title,
|
||||
.description {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.description {
|
||||
margin: 4rem 0;
|
||||
line-height: 1.5;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.code {
|
||||
background: #fafafa;
|
||||
border-radius: 5px;
|
||||
padding: 0.75rem;
|
||||
font-size: 1.1rem;
|
||||
font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,
|
||||
Bitstream Vera Sans Mono, Courier New, monospace;
|
||||
}
|
||||
|
||||
.grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
max-width: 800px;
|
||||
}
|
||||
|
||||
.card {
|
||||
margin: 1rem;
|
||||
padding: 1.5rem;
|
||||
text-align: left;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
border: 1px solid #eaeaea;
|
||||
.tableSection {
|
||||
padding: 2rem;
|
||||
background: #D3D3D3;
|
||||
width: 800px;
|
||||
border-radius: 10px;
|
||||
transition: color 0.15s ease, border-color 0.15s ease;
|
||||
max-width: 300px;
|
||||
}
|
||||
|
||||
.card:hover,
|
||||
.card:focus,
|
||||
.card:active {
|
||||
color: #0070f3;
|
||||
border-color: #0070f3;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
margin: 0 0 1rem 0;
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
.card p {
|
||||
margin: 0;
|
||||
font-size: 1.25rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 1em;
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
.grid {
|
||||
.table table {
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
.tableSection h1 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
20
examples/nextjs-api-sales/styles/save.module.css
Normal file
20
examples/nextjs-api-sales/styles/save.module.css
Normal file
|
|
@ -0,0 +1,20 @@
|
|||
.container {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 5rem 2rem 0;
|
||||
align-items: center;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
|
||||
.formSection {
|
||||
padding: 2rem;
|
||||
background: #D3D3D3;
|
||||
width: 400px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
.formSection h1 {
|
||||
text-align: center;
|
||||
color: black;
|
||||
}
|
||||
|
|
@ -2384,6 +2384,11 @@ react-is@^16.13.1:
|
|||
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
|
||||
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
|
||||
|
||||
react-notifications-component@^3.4.1:
|
||||
version "3.4.1"
|
||||
resolved "https://registry.yarnpkg.com/react-notifications-component/-/react-notifications-component-3.4.1.tgz#3670aa17210a4e63ba3b4f553853bd99ab6a0150"
|
||||
integrity sha512-vS/RLdz+VlXZz0dbK+LCcdhgUdUPi1BvSo7mVp58AQDpixI9emGwI0uISXhiTSjqFn/cPibPlJOJQ8kcvgmUrQ==
|
||||
|
||||
react@17.0.2:
|
||||
version "17.0.2"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
|
||||
|
|
|
|||
Loading…
Reference in a new issue