From 5c3fcdd8f2fa12e10b5b39551a6f300b1e6f4c53 Mon Sep 17 00:00:00 2001 From: bdougie Date: Wed, 17 Aug 2022 13:22:08 -0700 Subject: [PATCH] updates --- README.md | 68 +- components/Card.jsx | 372 +- components/Hero.jsx | 64 + components/Loader.jsx | 77 +- components/SocialCardCommon.jsx | 124 + components/SocialCardFTL.jsx | 72 + components/SocialCardPreview.jsx | 104 + components/SocialCards.jsx | 176 + components/ToggleButton.jsx | 36 + next.config.js | 6 +- package-lock.json | 19152 ++++++++++------ package.json | 68 +- pages/_app.js | 20 +- pages/api/download.js | 50 +- pages/api/fetchMeta.js | 40 +- pages/api/mts.js | 37 + pages/api/og.js | 72 + pages/api/ogs.js | 72 + pages/index.js | 20 +- pages/index.jsx | 14 + pages/motion.js | 49 + pages/old.js | 6 + postcss.config.js | 12 +- public/assets/icons/down-arrow.png | Bin 0 -> 975 bytes .../images/Empty-State-Illustrations.png | Bin 0 -> 17245 bytes .../assets/images/No-Image-Placeholder.webp | Bin 0 -> 18464 bytes public/assets/images/card-banner-lg.png | Bin 0 -> 307886 bytes public/assets/images/card-banner-sm.png | Bin 0 -> 411100 bytes public/assets/images/hero-ellipse.png | Bin 0 -> 4848874 bytes public/{ => assets/images}/missing-face.png | Bin public/{ => assets/images}/missing.png | Bin public/vercel.svg | 6 +- service/redux/CardSlice.js | 18 + service/redux/LoadingSlice.js | 18 + service/redux/store.js | 11 + styles/Home.module.css | 232 +- styles/globals.css | 43 +- tailwind.config.js | 59 +- yarn.lock | 4120 ++++ 39 files changed, 17161 insertions(+), 8057 deletions(-) create mode 100644 components/Hero.jsx create mode 100644 components/SocialCardCommon.jsx create mode 100644 components/SocialCardFTL.jsx create mode 100644 components/SocialCardPreview.jsx create mode 100644 components/SocialCards.jsx create mode 100644 components/ToggleButton.jsx create mode 100644 pages/api/mts.js create mode 100644 pages/api/og.js create mode 100644 pages/api/ogs.js create mode 100644 pages/index.jsx create mode 100644 pages/motion.js create mode 100644 pages/old.js create mode 100644 public/assets/icons/down-arrow.png create mode 100644 public/assets/images/Empty-State-Illustrations.png create mode 100644 public/assets/images/No-Image-Placeholder.webp create mode 100644 public/assets/images/card-banner-lg.png create mode 100644 public/assets/images/card-banner-sm.png create mode 100644 public/assets/images/hero-ellipse.png rename public/{ => assets/images}/missing-face.png (100%) rename public/{ => assets/images}/missing.png (100%) create mode 100644 service/redux/CardSlice.js create mode 100644 service/redux/LoadingSlice.js create mode 100644 service/redux/store.js create mode 100644 yarn.lock diff --git a/README.md b/README.md index 7f3af42..b12f3e3 100644 --- a/README.md +++ b/README.md @@ -1,34 +1,34 @@ -This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). - -## Getting Started - -First, run the development server: - -```bash -npm run dev -# or -yarn dev -``` - -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. - -You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. - -## Learn More - -To learn more about Next.js, take a look at the following resources: - -- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. -- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. - -You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! - -## Deploy on Vercel - -The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. - -Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. +This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). + +## Getting Started + +First, run the development server: + +```bash +npm run dev +# or +yarn dev +``` + +Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. + +You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. + +[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. + +The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. + +## Learn More + +To learn more about Next.js, take a look at the following resources: + +- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API. +- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial. + +You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome! + +## Deploy on Vercel + +The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js. + +Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details. diff --git a/components/Card.jsx b/components/Card.jsx index 4ff3d61..39c44f7 100644 --- a/components/Card.jsx +++ b/components/Card.jsx @@ -1,167 +1,205 @@ -import axios from "axios"; -import { useEffect, useRef, useState } from "react" -import { FontAwesomeIcon } from '@fortawesome/react-fontawesome' -import { faMoon, faSun, faEarthEurope, faDownload, faMagnifyingGlass } from '@fortawesome/free-solid-svg-icons' -import { motion } from "framer-motion" -import Loader from "./Loader"; - -function Card() { - - const [dark, setDark] = useState(false); - - const initTheme = () => { - if(localStorage.getItem("dark") == null ){ - localStorage.setItem("dark", false); - } - if(localStorage.getItem("dark") == "true"){ - setDark(true) - } - } - - const switchTheme = () => { - setDark(!dark) - if(localStorage.getItem("dark") == "false"){ - localStorage.setItem("dark", true) - } - else{ - localStorage.setItem("dark", false) - } - - } - - const urlRef = useRef(""); - const [metaData, setMetaData] = useState({}); - const [loading, setLoading] = useState(false); - - const fetchMeta = async() => { - - - setLoading(true); - axios.get(`/api/fetchMeta/?url=${urlRef.current.value}`) - .then(res => { - setMetaData(res); - console.log(metaData) - setLoading(false); - }) - .catch(err => { - setLoading(false); - console.error(err); - }); - - } - - - - useEffect(() => { - initTheme(); - }, []); - - const submitHandler = ()=> { - - fetchMeta(); - - } - - - return ( -
-
-
-
- - -
-
- -
-
-
- - Social - - Carding -
- - - -
- - -
- -
-
- - { - loading && -
- -
- } - - { - !loading && metaData && metaData.data && Object.keys(metaData.data.response).length != 0 && ( -
-
-
-
- { metaData.data.response.image ? ( -
- Download - -
- ): - -
- } -
-
- { metaData.data.response.image ? ( -
- -
- ): - Image missing - - } - -
-
-

{metaData.data.response.title}

- -

{metaData.data.response.description && metaData.data.response.description }

- -
- -

{metaData.data.response.site_name}

-
-
- -
-
-
- ) - } - - - -
-
- ) -} - -export default Card; +import axios from 'axios'; +import { useEffect, useRef, useState } from 'react'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faMoon, + faSun, + faEarthEurope, + faDownload, + faMagnifyingGlass, +} from '@fortawesome/free-solid-svg-icons'; +import { motion } from 'framer-motion'; +import Loader from './Loader'; + +function Card() { + const [dark, setDark] = useState(false); + + const initTheme = () => { + if (localStorage.getItem('dark') == null) { + localStorage.setItem('dark', false); + } + if (localStorage.getItem('dark') == 'true') { + setDark(true); + } + }; + + const switchTheme = () => { + setDark(!dark); + if (localStorage.getItem('dark') == 'false') { + localStorage.setItem('dark', true); + } else { + localStorage.setItem('dark', false); + } + }; + + const urlRef = useRef(''); + const [metaData, setMetaData] = useState({}); + const [loading, setLoading] = useState(false); + + const fetchMeta = async () => { + setLoading(true); + axios + .get(`/api/fetchMeta/?url=${urlRef.current.value}`) + .then((res) => { + setMetaData(res); + console.log(metaData); + setLoading(false); + }) + .catch((err) => { + setLoading(false); + console.error(err); + }); + }; + + useEffect(() => { + initTheme(); + }, []); + + const submitHandler = () => { + fetchMeta(); + }; + + return ( +
+
+
+
+
+ + +
+
+ +
+
+
+ + Social + + + Carding + +
+ + + +
+ + +
+ +
+
+ + {loading && ( +
+ +
+ )} + + {!loading && + metaData && + metaData.data && + Object.keys(metaData.data.response).length != 0 && ( +
+
+
+
+ {metaData.data.response.image ? ( + + ) : ( +
+ )} +
+
+ {metaData.data.response.image ? ( +
+ +
+ ) : ( + Image missing + )} +
+
+

+ {metaData.data.response.title} +

+ +

+ {metaData.data.response.description && + metaData.data.response.description} +

+ +
+ +

+ {metaData.data.response.site_name} +

+
+
+
+
+
+ )} +
+
+
+ ); +} + +export default Card; diff --git a/components/Hero.jsx b/components/Hero.jsx new file mode 100644 index 0000000..bbb59f3 --- /dev/null +++ b/components/Hero.jsx @@ -0,0 +1,64 @@ +import React, { useRef } from "react"; +import { TbSearch } from "react-icons/tb"; +import { useDispatch, useSelector } from "react-redux"; +import { setCard } from "../service/redux/CardSlice"; +import { leLoadingToggle } from "../service/redux/LoadingSlice"; +import { useAppSelector } from "../service/redux/store"; +const Hero = () => { + const { loading } = useSelector((state) => state.loading); + const dispatch = useDispatch(); + const link = useRef(); + function handleFetch() { + dispatch(leLoadingToggle()); + // if(link.current.value.includes('facebook')) + fetch(`/api/og/?url=${link.current.value}`) + .then((res) => res.json()) + .then((res) => { + dispatch(setCard({ ...res.response, url: link.current.value })); + dispatch(leLoadingToggle()); + }); + } + return ( +
+ Hero Ellipse Photo + +
+

+ Social +
+ Carding +

+ +

Turn your links into clickable social cards

+ +
+ + +
+
+ + Down Arrow Icon +
+ ); +}; + +export default Hero; diff --git a/components/Loader.jsx b/components/Loader.jsx index b861cdb..053c784 100644 --- a/components/Loader.jsx +++ b/components/Loader.jsx @@ -1,39 +1,38 @@ -import React from 'react' -import { motion } from "framer-motion" - -function Loader() { - return ( -
- - - - - - -
- ) -} - -export default Loader \ No newline at end of file +import React from 'react'; +import { motion } from 'framer-motion'; + +function Loader() { + return ( +
+ + + + + +
+ ); +} + +export default Loader; diff --git a/components/SocialCardCommon.jsx b/components/SocialCardCommon.jsx new file mode 100644 index 0000000..d02dca8 --- /dev/null +++ b/components/SocialCardCommon.jsx @@ -0,0 +1,124 @@ +import React, { useEffect, useRef, useState } from "react"; +import { FaPen, FaCheck } from "react-icons/fa"; +import Loader from "./Loader"; + +const SocialCardCommon = ({ type, data }) => { + const [showTitleInput, setShowTitleInput] = useState(false); + const [title, setTitle] = useState(data.title); + const [showDescriptionInput, setShowDescriptionInput] = useState(false); + const [description, setDescription] = useState(data.description); + const [file, setFile] = useState(null); + + useEffect(() => { + if (file) { + console.log(URL.createObjectURL(file)); + } + }, [file]); + + const handleTitleEdit = () => { + setShowTitleInput((prev) => !prev); + }; + + const handleDescriptionEdit = () => { + setShowDescriptionInput((prev) => !prev); + }; + + return ( +
+
+
+ { + // setImage(data?.image?.url); + console.log({ img }); + }} + src={ + data?.image?.url + ? data?.image?.url + : "/assets/images/No-Image-Placeholder.webp" + } + alt="Card Banner" + /> + + setFile(e.target.files[0])} + className="absolute top-0 bottom-0 left-0 right-0 opacity-0" + /> +
+ +
+
+ {showTitleInput ? ( + { + if (e.target.value) { + setTitle(e.target.value); + } + }} + value={title} + className="px-2 py-1 w-[260px] text-sm placeholder:text-sm" + placeholder="Type title" + autoFocus + /> + ) : ( +
{title}
+ )} + + + {showTitleInput ? : } + +
+ +
+ {showDescriptionInput ? ( +