diff --git a/next.config.js b/next.config.js index a09f988..e501ba9 100644 --- a/next.config.js +++ b/next.config.js @@ -1,6 +1,5 @@ module.exports = { poweredByHeader: false, - trailingSlash: true, experimental: { appDir: true, }, diff --git a/package-lock.json b/package-lock.json index aee3328..d01ed0a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,7 +10,7 @@ "dependencies": { "clsx": "^1.2.1", "file-loader": "^6.2.0", - "framer-motion": "^8.4.2", + "framer-motion": "^8.5.0", "markdownlint-cli": "^0.33.0", "next": "^13.1.1", "prop-types": "^15.8.1", @@ -5249,9 +5249,9 @@ } }, "node_modules/framer-motion": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.4.2.tgz", - "integrity": "sha512-AdYwbEZZ+6Z748A8JdNtwH7YR24HvXr/hJHL06ofipMyRchrf7Mzvk69zM24+rAm3SC3DCJK0WdbhpOLzroO+w==", + "version": "8.5.0", + "resolved": "https://registry.npmjs.org/framer-motion/-/framer-motion-8.5.0.tgz", + "integrity": "sha512-z5hQvIa+9uFcA2aFmT+6XsUfuVPl9Y1uhs5yntxU1Q0E6hm4wDRpvFlB/yYN/cdfXUctf/1Q1Rep/dqOipz8sg==", "dependencies": { "@motionone/dom": "^10.15.3", "hey-listen": "^1.0.8", diff --git a/package.json b/package.json index 328dac7..ee73df7 100644 --- a/package.json +++ b/package.json @@ -22,7 +22,7 @@ "dependencies": { "clsx": "^1.2.1", "file-loader": "^6.2.0", - "framer-motion": "^8.4.2", + "framer-motion": "^8.5.0", "markdownlint-cli": "^0.33.0", "next": "^13.1.1", "prop-types": "^15.8.1", diff --git a/public/images/hero.jpeg b/public/images/hero.jpeg new file mode 100644 index 0000000..be130b3 Binary files /dev/null and b/public/images/hero.jpeg differ diff --git a/public/images/mobile.svg b/public/images/mobile.svg index 85ca6b7..92cea85 100644 --- a/public/images/mobile.svg +++ b/public/images/mobile.svg @@ -1,106 +1,15 @@ - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + - - + + - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/public/images/noise-2.png b/public/images/noise-2.png deleted file mode 100644 index 60a4288..0000000 Binary files a/public/images/noise-2.png and /dev/null differ diff --git a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx index ac14814..bdd5546 100644 --- a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx +++ b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/head.jsx @@ -22,7 +22,6 @@ const Head = async ({ const matchingSubCategory = findSubCategoryBySlug(subCategories, subCategorySlug); const title = `${MAIN_TITLE}${SEPARATOR}${matchingCategory.category}${SEPARATOR}${matchingSubCategory.subCategory}`; - return ; }; diff --git a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx index 7dc230b..011e6f1 100644 --- a/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx +++ b/src/app/(category)/[category-slug]/(sub-category)/[sub-category-slug]/page.jsx @@ -1,8 +1,5 @@ -import slugify from 'slugify'; - -import Button from 'components/shared/button'; +import TemplateInfo from 'components/pages/sub-category/template-info'; import Link from 'components/shared/link'; -import LINKS from 'constants/links'; import { addSlugToCategories, addSlugToSubCategories, @@ -11,18 +8,6 @@ import { } from 'utils'; import { getCategories, getSubCategories, getNotifications } from 'utils/api/queries'; -const colors = ['rgba(255, 179, 204, 1)', 'rgba(255, 230, 179, 1)']; -const variables = [ - { - name: '{{play_name}}', - description: 'The name of the play', - }, - { - name: '{{theater_name}}', - description: 'The name of the theater', - }, -]; - const SubCategorySlug = async ({ params: { 'category-slug': categorySlug, 'sub-category-slug': subCategorySlug }, }) => { @@ -45,61 +30,15 @@ const SubCategorySlug = async ({ ); return ( -
-
-
-
- - List of all categories - - / - - {matchingCategory.category} - -
-
-

{matchingSubCategory.subCategory}

-

{matchingSubCategory.description}

-
-
Code Snippet
-
-

Variables

-
    - {variables.map(({ name, description }, index) => ( -
  • - - {name} - -

    {description}

    -
    • - ))} -
-
-
- - -
-
-
-
- -
-
-
+
+
+
+
-

Other notification types for Social Media

-
+

+ Other notification types for Social Media +

+
{otherSubCategories.map((subCategory, index) => ( {subCategory.subCategory} diff --git a/src/app/(category)/[category-slug]/page.jsx b/src/app/(category)/[category-slug]/page.jsx index d9d8f7a..93056e5 100644 --- a/src/app/(category)/[category-slug]/page.jsx +++ b/src/app/(category)/[category-slug]/page.jsx @@ -33,7 +33,7 @@ const CategoryPage = async ({ params: { 'category-slug': categorySlug } }) => { return (
-
+
List of all categories @@ -47,13 +47,13 @@ const CategoryPage = async ({ params: { 'category-slug': categorySlug } }) => {

-
- {/* {subCategories.lenght > 0 && +
+ {subCategories.length > 0 && subCategories.map((subCategory, index) => ( {subCategory.subCategory} - ))} */} + ))}
diff --git a/src/app/layout.jsx b/src/app/layout.jsx index cf46afa..d543578 100644 --- a/src/app/layout.jsx +++ b/src/app/layout.jsx @@ -8,7 +8,7 @@ const RootLayout = ({ children }) => (
-
{children}
+
{children}
diff --git a/src/app/page.jsx b/src/app/page.jsx index b8ecd54..ac2539a 100644 --- a/src/app/page.jsx +++ b/src/app/page.jsx @@ -1,44 +1,56 @@ -import slugify from 'slugify'; +import NextImage from 'next/image'; import Button from 'components/shared/button'; import CategoryCard from 'components/shared/category-card'; -import Link from 'components/shared/link'; import ButtonLogo from 'images/chatgpt.inline.svg'; import { getCategoriesWithAllSubCategories } from 'utils'; const Home = async () => { const categories = await getCategoriesWithAllSubCategories(); return ( -
-
-
-

- Notification inspirations for your App made
- with ChatGPT -

-

- Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem tincidunt - libero sed neque. -

-
- - + <> +
+
+
+

+ Notification inspirations for your App made{' '} +
+ with ChatGPT +

+

+ Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem + tincidunt libero sed neque. +

+
+ + +
+
+
+
-
-
-

Lorem ipsum dolor

-

- Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem tincidunt - libero sed neque. -

-
    +
    +
    +
    +

    Lorem ipsum dolor

    +

    + Lorem ipsum dolor sit amet consectetur. Lectus tortor proin tristique et. Sem + tincidunt libero sed neque. +

    +
    +
      {categories.map((category, index) => ( {
    -
+ ); }; diff --git a/src/components/pages/sub-category/mobile/card.inline.svg b/src/components/pages/sub-category/mobile/card.inline.svg new file mode 100644 index 0000000..0b23393 --- /dev/null +++ b/src/components/pages/sub-category/mobile/card.inline.svg @@ -0,0 +1,151 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/pages/sub-category/mobile/close.inline.svg b/src/components/pages/sub-category/mobile/close.inline.svg new file mode 100644 index 0000000..8acf5fa --- /dev/null +++ b/src/components/pages/sub-category/mobile/close.inline.svg @@ -0,0 +1,16 @@ + + + + diff --git a/src/components/pages/sub-category/mobile/index.js b/src/components/pages/sub-category/mobile/index.js new file mode 100644 index 0000000..e32112f --- /dev/null +++ b/src/components/pages/sub-category/mobile/index.js @@ -0,0 +1,2 @@ +import Mobile from './mobile'; +export default Mobile; \ No newline at end of file diff --git a/src/components/pages/sub-category/mobile/mobile.jsx b/src/components/pages/sub-category/mobile/mobile.jsx new file mode 100644 index 0000000..adf38c6 --- /dev/null +++ b/src/components/pages/sub-category/mobile/mobile.jsx @@ -0,0 +1,102 @@ +'use client'; + +import clsx from 'clsx'; +import { motion, AnimatePresence } from 'framer-motion'; +import { useEffect, useState } from 'react'; + +import CardSvg from './card.inline.svg'; +import CloseSvg from './close.inline.svg'; + +const Mobile = ({ notification }) => { + const [currentDate, setCurrentDate] = useState(false); + const [currentTime, setCurrentTime] = useState(false); + + const truncatedMessage = (msg) => (msg.length > 60 ? `${msg.slice(0, 60)}...` : msg); + + useEffect(() => { + // assign to a variable current date in this format January 10, Tuesday + const currentDate = new Date().toLocaleString('en-us', { + month: 'long', + day: 'numeric', + weekday: 'long', + }); + // assign to a variable current date in this format 14:51 without AM/PM + + const currentTime = new Date().toLocaleString('en-us', { + hour: 'numeric', + minute: 'numeric', + hour12: false, + }); + + setCurrentTime(currentTime); + setCurrentDate(currentDate); + }, []); + return ( +
+
+ +
+
+ {currentDate || 'Friday 1, January'} +
+
+ {currentTime || '00:00'} +
+
+
+
+
Notification Center
+ +
+
+ + + +
+
+
+ +
+
+
+
{notification.sender}
+
1 second ago
+
+
+ {truncatedMessage(notification.msg)} +
+
+
+
slide to view
+
+ + +
+
+
+
+
+
+ ); +}; + +export default Mobile; diff --git a/src/components/pages/sub-category/template-info/index.js b/src/components/pages/sub-category/template-info/index.js new file mode 100644 index 0000000..99ccc09 --- /dev/null +++ b/src/components/pages/sub-category/template-info/index.js @@ -0,0 +1,2 @@ +import TemplateInfo from './template-info'; +export default TemplateInfo; \ No newline at end of file diff --git a/src/components/pages/sub-category/template-info/template-info.jsx b/src/components/pages/sub-category/template-info/template-info.jsx new file mode 100644 index 0000000..117728c --- /dev/null +++ b/src/components/pages/sub-category/template-info/template-info.jsx @@ -0,0 +1,118 @@ +'use client'; + +import { useState } from 'react'; + +import Mobile from 'components/pages/sub-category/mobile'; +import Button from 'components/shared/button'; +import Link from 'components/shared/link'; +import LINKS from 'constants/links'; + +const colors = ['rgba(255, 179, 204, 1)', 'rgba(255, 230, 179, 1)']; +const variables = [ + { + name: '{{play_name}}', + description: 'The name of the play', + }, + { + name: '{{theater_name}}', + description: 'The name of the theater', + }, +]; + +const notificationTemp = + 'est rerum tempore {{vitae}} sequi sint nihil reprehenderit dolor beatae ea dolores neque fugiat blanditiis voluptate porro vel nihil molestiae ut {{reiciendis}} qui aperiam non debitis possimus qui neque nisi nulla'; + +// function that will accept notificationTemp string and replace items in {{}} with span tags containing the variable name and that uses style color from a colors variables based on the index of the variable in the variables array +const parseNotification = (notification) => { + let enhancedNotification = notification; + const regex = /{{(.*?)}}/g; + const matches = notification.match(regex); + matches.forEach((match, index) => { + enhancedNotification = enhancedNotification.replace( + match, + `${match}` + ); + }); + return enhancedNotification; +}; + +const notification = { + id: '5f9f1b9b0b1b9c0017b0b1b1', + msg: notificationTemp, + image: 'https://picsum.photos/200', + sender: 'Roger', +}; + +const generateNewNotification = (notification) => { + const newNotification = { ...notification }; + newNotification.id = Math.random().toString(36).substr(2, 9); + console.log(); + return newNotification; +}; +const TemplateInfo = ({ matchingCategory, matchingSubCategory }) => { + const [currentNotification, setCurrentNotification] = useState(notification); + + const sendTestNotification = () => { + const newNotification = generateNewNotification(currentNotification); + setCurrentNotification(newNotification); + }; + + return ( +
+
+
+ + List of all categories + + / + + {matchingCategory.category} + +
+
+

{matchingSubCategory.subCategory}

+

{matchingSubCategory.description}

+
+
+
+

Variables

+
    + {variables.map(({ name, description }, index) => ( +
  • + + {name} + +

    {description}

    +
    • + ))} +
+
+
+ + +
+
+
+ +
+
+ ); +}; + +export default TemplateInfo; diff --git a/src/components/shared/button/button.jsx b/src/components/shared/button/button.jsx index e469692..dd90689 100644 --- a/src/components/shared/button/button.jsx +++ b/src/components/shared/button/button.jsx @@ -8,7 +8,7 @@ import Link from 'components/shared/link'; const styles = { base: 'inline-flex items-center justify-center !leading-none text-center whitespace-nowrap rounded transition-[colors, opacity] duration-200 outline-none uppercase font-medium', size: { - lg: 'h-12 px-6 text-sm', + lg: 'h-12 px-6 text-sm sm:h-10 sm:px-5 sm:text-xs', sm: 'h-10 px-5 text-xs', }, // TODO: Add themes. Better to name the theme using this pattern: "${color-name}-${theme-type}", e.g. "black-filled" @@ -20,7 +20,14 @@ const styles = { }, }; -const Button = ({ className: additionalClassName, to, size, theme, children, ...otherProps }) => { +const Button = ({ + className: additionalClassName = null, + to = null, + size, + theme, + children, + ...otherProps +}) => { const className = clsx(styles.base, styles.size[size], styles.theme[theme], additionalClassName); const Tag = to ? Link : 'button'; @@ -40,9 +47,4 @@ Button.propTypes = { children: PropTypes.node.isRequired, }; -Button.defaultProps = { - className: null, - to: null, -}; - export default Button; diff --git a/src/components/shared/category-card/category-card.jsx b/src/components/shared/category-card/category-card.jsx index 4b6033f..be216fa 100644 --- a/src/components/shared/category-card/category-card.jsx +++ b/src/components/shared/category-card/category-card.jsx @@ -1,5 +1,6 @@ import PropTypes from 'prop-types'; import React from 'react'; +import slugify from 'slugify'; import Link from 'components/shared/link'; import ArrowIcon from 'images/arrow.inline.svg'; @@ -11,29 +12,41 @@ import AirplaneIcon from 'images/cards/airplane.inline.svg'; // shop: ShopIcon, // }; -const CategoryCard = ({ title, description, subCategories }, index) => ( +const CategoryCard = ({ title, description, subCategories, categoryId }, index) => ( // const Icon = icons[iconName]; // console.log('aaaaa'); -
  • +
  • -
    - +
    +
    + +

    {title}

    {description}

    -
      +
        {subCategories && subCategories.length > 0 && subCategories.slice(0, 5).map((item, index) => ( -
      • - {item.subCategory} +
      • + + {item.subCategory} +
        • ))}
      - + show more diff --git a/src/components/shared/header/header.jsx b/src/components/shared/header/header.jsx index f8676fd..6e31362 100644 --- a/src/components/shared/header/header.jsx +++ b/src/components/shared/header/header.jsx @@ -6,12 +6,13 @@ import Link from '../link'; // TODO: Implement mobile menu functionality and delete eslint comment below, example — https://user-images.githubusercontent.com/20713191/144221747-70dc933e-a5bd-4586-9019-08117afc13e0.png // eslint-disable-next-line no-unused-vars const Header = () => ( -
      -
      +
      +
      +
      -