diff --git a/components/core/App.js b/components/core/App.js index 692ea94..46ff57b 100644 --- a/components/core/App.js +++ b/components/core/App.js @@ -35,7 +35,7 @@ const App = (props) => { // User is not logged In. Fetch all the public shapes const response = await axios.get("/api/GET/shapes", { params: { - type: 'private' + type: 'public' } }); shapes = response.data; diff --git a/components/core/Landing.js b/components/core/Landing.js index 5aac0fd..abfdd0c 100644 --- a/components/core/Landing.js +++ b/components/core/Landing.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import Button from 'react-bootstrap/Button'; import Container from 'react-bootstrap/Container'; @@ -6,11 +6,22 @@ import Row from 'react-bootstrap/Row'; import Col from 'react-bootstrap/Col'; import Navbar from 'react-bootstrap/Navbar'; -// Header -import { Header } from '..' +// axios +import axios from "axios"; + +// loader +import Loader from "react-loader-spinner"; + +// Trending Shapes +import { TrendingShapes } from ".."; + +// dynamic from Next.js +import dynamic from "next/dynamic"; // Images import BannerBg from '../../public/images/bg-banner.png'; +import DottedBg from '../../public/images/bg-dotted.png'; +import AbstractBg1 from '../../public/images/bg-abstract-1.png'; import ImgLogo from '../../public/images/img-logo.svg'; import IconPngJpg from '../../public/images/icon-png-jpg.svg'; import IconSvg from '../../public/images/icon-svg.svg'; @@ -45,7 +56,6 @@ const LandingBanner = styled.section` background-color: var(--color-brand); background: rgb(93,33,210); background: linear-gradient(180deg, rgba(93,33,210,1) 0%, rgba(175,33,210,1) 100%); - // background-image: url(${BannerBg}); background-position: center center; background-repeat: no-repeat; background-size: cover; @@ -234,6 +244,14 @@ const ActionBar = styled.div` const SectionAbout = styled.section` padding: 6rem 0; + background-image: url(${AbstractBg1}); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + + @media (max-width: 1400px) { + background-size: contain; + } `; const SectionTitle = styled.div` @@ -242,9 +260,11 @@ const SectionTitle = styled.div` `; const SectionFileTypes = styled.section` - padding: 6rem 0; - // background-color: var(--color-neutral-20); - background-color: rgba(var(--color-brand-rgb), 0.024); + padding: 6rem 0 8rem 0; + background-image: url(${DottedBg}); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; `; const SectionContact = styled.section` @@ -383,7 +403,7 @@ const FileSupportCardItem = styled.div` background: var(--color-neutral-10); border-radius: 1rem; padding: 3.2rem 2.8rem; - box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 16%); + box-shadow: 3px 33px 81px 0 rgb(180 180 200 / 26%); .card-icon { @@ -424,11 +444,33 @@ const FileSupportCardItem = styled.div` `; const Landing = ({ setOpen, user, setUser }) => { - + // shapes + const [shapeData, setShapeData] = useState([]); + + // shapes loading + const [loaded, setLoaded] = useState(false); + + useEffect(async () => { + const response = await axios.get("/api/GET/shapes", { + params: { + type: "public", + }, + }); + + let data = response.data; + let topFourShapes = data.slice(0, 4); + setShapeData(topFourShapes); + setLoaded(true); + }, []); + return(
- TryShape + + + TryShape + + @@ -436,6 +478,7 @@ const Landing = ({ setOpen, user, setUser }) => { Key Features File Support + {shapeData.length > 0 && Trending Shapes} Contact @@ -554,6 +597,23 @@ const Landing = ({ setOpen, user, setUser }) => { + + { + loaded + ? ( + shapeData.length > 0 && + ) + : ( + + ) + } + diff --git a/components/index.js b/components/index.js index e4c0448..c5d54e6 100644 --- a/components/index.js +++ b/components/index.js @@ -16,3 +16,4 @@ export { default as ShapeForm } from "./utils/ShapeForm"; export { default as ShapePreview } from "./utils/ShapePreview"; export { default as DraggableVertice } from "./utils/DraggableVertice"; export { default as NoShapeFound } from './utils/NoShapeFound'; +export { default as TrendingShapes } from "./utils/TrendingShapes"; \ No newline at end of file diff --git a/components/utils/ShapeList.js b/components/utils/ShapeList.js index 9bbc566..eb3887a 100644 --- a/components/utils/ShapeList.js +++ b/components/utils/ShapeList.js @@ -181,21 +181,6 @@ const ShapeCreditsThumb = styled.img` margin-right: 0.7rem; `; -const Playground = styled.div` - width: 100%; -`; - -const ShapeDetails = styled.ul` - background-color: #ebebeb; - border-radius: 4px; - padding: 10px; - width: 100%; -`; - -const ShapeDetailsItems = styled.li` - word-wrap: break-word; -`; - const ShapeCardsContainer = styled.div` background-color: var(--color-neutral-20); `; @@ -210,11 +195,6 @@ const ShapeCardHeader = styled.div` padding: 0 1.4rem 1.2rem 1.4rem; `; -const ShapeCardSwitch = styled.div` - display: none; - margin: 5px auto auto 9px; -`; - const DoubleTapLike = styled.div` position: absolute; left: 50%; diff --git a/components/utils/TrendingShapes.js b/components/utils/TrendingShapes.js new file mode 100644 index 0000000..18634f3 --- /dev/null +++ b/components/utils/TrendingShapes.js @@ -0,0 +1,224 @@ +import React from "react"; + +// bootstrap +import Container from "react-bootstrap/Container"; +import Button from "react-bootstrap/Button"; + +// icon +import { FiSearch } from "react-icons/fi"; +import { BsFillHeartFill, BsHeart } from "react-icons/bs"; + +// link +import Link from "next/link"; + +// dynamic from Next.js +import dynamic from "next/dynamic"; + +// Clip-Path +const Shape = dynamic(import("react-clip-path"), { ssr: false }); + +// misc unitless +import { getShapeFileName, getShapeId } from "../../utils/misc"; + +// date-fns +import { formatRelative } from "date-fns"; + +// Styled Component +import styled from "styled-components"; + +// images +import AbstractBg2 from "../../public/images/bg-abstract-2.png"; + +const SectionTrendingShapes = styled.section` + padding: 6rem 0; + background-color: rgba(var(--color-brand-rgb), 0.024); + background-image: url(${AbstractBg2}); + background-position: center center; + background-repeat: no-repeat; + background-size: cover; + + @media (max-width: 1400px) { + background-size: contain; + } +`; + +const SectionTitle = styled.div` + display: flex; + justify-content: center; +`; + +const ShapeCardList = styled.div` + padding: 2rem 0 2rem 0; + display: grid; + grid-template-columns: repeat(4, minmax(220px, 1fr)); + grid-gap: 2rem; + + @media (max-width: 991px) { + grid-template-columns: repeat(2, minmax(300px, 1fr)); + } + + @media (max-width: 767px) { + grid-template-columns: repeat(1, 1fr); + } +`; + +const ShapeCard = styled.div` + position: relative; + border-radius: 0.6rem; + background-color: var(--color-neutral-10); + overflow: hidden; + box-shadow: 3px 10px 18px 0 rgb(111 118 138 / 6%); + + &:hover { + box-shadow: 3px 33px 81px 0 rgb(111 118 138 / 26%); + + .shape-actions { + opacity: 1; + } + } +`; + +const ShapeCardBody = styled.div` + position: relative; + padding: 1rem 1.4rem; +`; + +const ShapeCardHeader = styled.div` + margin: 0; + padding: 0 1.4rem 1.2rem 1.4rem; +`; + +const ShapeName = styled.h2` + display: flex; + justify-content: flex-start; + align-items: center; + grid-gap: 0.3rem; + margin: 0 0 0.8rem 0; + font-weight: var(--fw-bold); + font-size: var(--fs-rg); + color: var(--color-neutral-100); +`; + +const ShapeNameHeader = styled.div` + display: flex; + justify-content: space-between; +`; + +const ShapeLikes = styled.div` + display: flex; + align-items: center; + height: 1.6rem; + + svg { + margin-right: 0.3rem; + } +`; + +const ShapeLikesCount = styled.div` + font-size: var(--fs-sm); + color: var(--color-neutral-60); +`; + +const LikeFilledIcon = styled(BsFillHeartFill)` + cursor: pointer; +`; + +const ShapeCredits = styled.div` + display: flex; + align-items: center; + border-top: solid 1px var(--color-neutral-20); + padding-top: 1rem; +`; + +const ShapeCreditsThumb = styled.img` + border-radius: 50%; + height: 32px; + width: 32px; + margin-right: 0.7rem; +`; + +const ShapeCreditsOwner = styled.div` + display: flex; + flex-direction: column; + font-weight: var(--fs-md); +`; + +const ShapeCreditsOwnerName = styled.div` + font-size: var(--fs-sm); + font-weight: var(--fw-semibold); + color: var(--color-neutral-60); + line-height: 1; +`; + +const ShapeCreditsDate = styled.small` + margin-top: 0.3rem; + font-size: var(--fs-sm); + color: var(--color-neutral-60); + line-height: 1; +`; + +const TrendingShapes = ({ shapeData }) => { + return ( + <> + + + +

Trending Shapes

+ + + {shapeData.map((shape, index) => ( + + + + {shape.name} + + + {shape.likes} + + + + + + + + + + {shape.name1} + + + at{" "} + {formatRelative(shape["__createdtime__"], new Date())} + + + + + + ))} + + +
+ + + +
+ + + + ); +}; + +export default TrendingShapes; diff --git a/pages/api/GET/shapes.js b/pages/api/GET/shapes.js index 0b050a3..5a2bcbc 100644 --- a/pages/api/GET/shapes.js +++ b/pages/api/GET/shapes.js @@ -6,10 +6,14 @@ export default async function handler(req, res) { sql = `SELECT * FROM tryshape.shapes s INNER JOIN tryshape.users u ON s.createdBy=u.email - WHERE s.private=false + WHERE s.private=true ORDER BY s.likes DESC`; } else if(type === 'public') { - sql = `SELECT * FROM tryshape.shapes`; + sql = `SELECT * + FROM tryshape.shapes s + INNER JOIN tryshape.users u ON s.createdBy=u.email + WHERE s.private=false + ORDER BY s.likes DESC`; } else if(type === 'public-logged-in') { sql = `SELECT * FROM tryshape.shapes s @@ -18,6 +22,9 @@ export default async function handler(req, res) { WHERE s.private=false OR createdBy = '${email}' ORDER BY s.likes DESC`; + } else if(type === 'all') { + sql = `SELECT * + FROM tryshape.shapes`; } const request = await fetch(process.env.NEXT_PUBLIC_DB_URL, { diff --git a/pages/index.js b/pages/index.js index 68b6ac5..7d1682b 100644 --- a/pages/index.js +++ b/pages/index.js @@ -6,11 +6,7 @@ const index = (props) => { console.log(user); return (
- { - user.length === 0 ? - () : - () - } +
); }; diff --git a/public/bg-abstract-1.png b/public/bg-abstract-1.png new file mode 100644 index 0000000..f1b53d8 Binary files /dev/null and b/public/bg-abstract-1.png differ diff --git a/public/bg-abstract-2.png b/public/bg-abstract-2.png new file mode 100644 index 0000000..503ab79 Binary files /dev/null and b/public/bg-abstract-2.png differ diff --git a/public/bg-dotted.png b/public/bg-dotted.png new file mode 100644 index 0000000..dee09db Binary files /dev/null and b/public/bg-dotted.png differ