diff --git a/app/loaders/phrase.ts b/app/loaders/phrase.ts index 88dcd6c3..4590c6d4 100644 --- a/app/loaders/phrase.ts +++ b/app/loaders/phrase.ts @@ -22,7 +22,5 @@ export async function loaderPhrase({ params }: LoaderSubmission): T { }, }); - return { - phrase: normalizePhrase(phraseDatabase[0]), - }; + return normalizePhrase(phraseDatabase[0]); } diff --git a/app/routes/$phrase/$id.tsx b/app/routes/$phrase/$id.tsx index e0d21fe0..68c3f0f5 100644 --- a/app/routes/$phrase/$id.tsx +++ b/app/routes/$phrase/$id.tsx @@ -16,13 +16,13 @@ export const meta: MetaFunction = ({ data }) => { return { title: `Frade de ${phrase.author} | 💪🏼 MotivaAí`, - description: `${phrase.phrase} ⎼ ${phrase.author}`, + description: `“${phrase.phrase}” ⏤ ${phrase.author}`, }; }; export async function loader(submission: LoaderSubmission) { - const data = await loaderPhrase(submission); - return json(data); + const phrase = await loaderPhrase(submission); + return json({ phrase }); } export default function Index() { diff --git a/app/routes/share/$id.tsx b/app/routes/share/$id.tsx new file mode 100644 index 00000000..de907e3e --- /dev/null +++ b/app/routes/share/$id.tsx @@ -0,0 +1,19 @@ +import type { LoaderSubmission } from '@remix-run/react/transition'; +import { redirect } from '@remix-run/node'; +import type { Phrase as PhraseType } from '~/tyles/phrase'; +import { loaderPhrase } from '~/loaders/phrase'; + +export async function loader(submission: LoaderSubmission) { + const { phrase, author, path } = await loaderPhrase(submission); + if (!phrase) return redirect(`/`); + + const BASE_URL = process.env.SITE_BASE_URL || 'https://motivaai.nandomoreira.dev'; + const text = encodeURIComponent(`_“${phrase}”_ ⏤ ${author} \nconfira em: ${BASE_URL}/${path}`); + const url = 'https://api.whatsapp.com/send'; + + return redirect(`${url}?text=${text}`); +} + +export default function Index() { + return <>; +} diff --git a/app/styles/main.css b/app/styles/main.css index 9161889a..3bf954f7 100644 --- a/app/styles/main.css +++ b/app/styles/main.css @@ -17,11 +17,21 @@ body { width: 100%; } +footer, +.back, +.btn, +.phrases, +.phrase { + transition: 0.5s all ease-in-out; + visibility: visible; + opacity: 1; +} + +body.--loading footer, body.--loading .back, -body.--loading .btn-grad, +body.--loading .btn, body.--loading .phrases, body.--loading .phrase { - transition: 0.5s all ease-in-out; visibility: hidden; opacity: 0; } @@ -198,11 +208,11 @@ a { content: " ⏤ "; } -.btn-shuffle { +.btn { background-image: linear-gradient(to right, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 0.1) 51%, rgba(255,255,255, 0.3) 100%); } -.btn-shuffle { +.btn { background-color: transparent; background-size: 200% auto; border-radius: 4px; @@ -217,33 +227,29 @@ a { text-align: center; transition: 0.5s all ease-in-out; } -.btn-grad:hover { +.btn:hover { background-position: right center; color: #fff; text-decoration: none; } -.btn-grad { - background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.3) 100%); +.btn__inner { + display: flex; + align-items: center; } - -.btn-grad { - background-size: 200% auto; - line-height: 1.3; - border-radius: 4px; - font-weight: 400; - color: #fff; - display: inline-block; - margin: 1rem 0 0; - padding: 0.53rem 1.25rem; - text-align: center; - transition: 0.5s all ease-in-out; +.btn__inner span, +.btn__inner svg { + margin: 0 0.2rem; } -.btn-grad:hover { - background-position: right center; - color: #fff; - text-decoration: none; +.btn-shuffle { + background-image: linear-gradient(to right, rgba(255,255,255, 0.3) 0%, rgba(255,255,255, 0.1) 51%, rgba(255,255,255, 0.3) 100%); +} +.btn-random { + background-image: linear-gradient(to right, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.1) 51%, rgba(0, 0, 0, 0.3) 100%); +} +.btn-whatsapp { + background-image: linear-gradient(to right, rgba(37, 211, 102, 0.6) 0%, rgba(37, 211, 102, 0.3) 51%, rgba(37, 211, 102, 0.6) 100%); } .loading { diff --git a/app/views/ListView.tsx b/app/views/ListView.tsx index 90856930..923d6330 100644 --- a/app/views/ListView.tsx +++ b/app/views/ListView.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { NavLink } from '@remix-run/react'; import { Phrase } from '~/components/Phrase'; import { shuffleArray } from '~/utils'; +import { BsShuffle } from 'react-icons/bs'; export interface ListViewProps { phrases: PhraseType[]; @@ -17,11 +18,17 @@ export function ListView({ phrases }: ListViewProps): React.ReactElement { return (

- - - Motiva Aí! + + + + Motiva Aí! +

diff --git a/app/views/PhraseView.tsx b/app/views/PhraseView.tsx index 752847ab..488f66ab 100644 --- a/app/views/PhraseView.tsx +++ b/app/views/PhraseView.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { NavLink } from '@remix-run/react'; import { Phrase } from '~/components/Phrase'; import type { Phrase as PhraseType } from '~/tyles/phrase'; +import { BsShuffle, BsWhatsapp } from 'react-icons/bs'; export interface PhraseViewProps { phrase: PhraseType; @@ -15,8 +16,17 @@ export function PhraseView({ phrase }: PhraseViewProps): React.ReactElement {
- - Motiva Aí! + + + + Motiva Aí! + + + + + + Compartilhar +
diff --git a/package.json b/package.json index 90d8915b..1d22b348 100644 --- a/package.json +++ b/package.json @@ -21,6 +21,7 @@ "@vercel/node": "^1.14.0", "react": "^17.0.2", "react-dom": "^17.0.2", + "react-icons": "^4.3.1", "slugify": "^1.6.5" }, "devDependencies": { diff --git a/yarn.lock b/yarn.lock index 3ca3d30a..ab3fe2e1 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5211,6 +5211,11 @@ react-dom@^17.0.2: object-assign "^4.1.1" scheduler "^0.20.2" +react-icons@^4.3.1: + version "4.3.1" + resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca" + integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ== + react-is@^16.13.1: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"