├── .eslintrc.json
├── jsconfig.json
├── postcss.config.js
├── public
    ├── favicon.ico
    ├── Screenshot 2023-09-18 044146.png
    ├── Screenshot 2023-09-18 044310.png
    ├── Screenshot 2023-09-18 044337.png
    ├── Screenshot 2023-09-18 044357.png
    └── Screenshot 2023-09-18 044415.png
├── next.config.js
├── src
    ├── pages
    │   ├── _app.js
    │   ├── api
    │   │   └── hello.js
    │   ├── _document.js
    │   └── index.js
    ├── styles
    │   └── globals.css
    └── components
    │   └── Toast.js
├── .gitignore
├── tailwind.config.js
├── package.json
└── README.md


/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": "next/core-web-vitals"
3 | }
4 | 


--------------------------------------------------------------------------------
/jsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 |   "compilerOptions": {
3 |     "paths": {
4 |       "@/*": ["./src/*"]
5 |     }
6 |   }
7 | }
8 | 


--------------------------------------------------------------------------------
/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | }
5 | 
6 | module.exports = nextConfig
7 | 


--------------------------------------------------------------------------------
/public/Screenshot 2023-09-18 044146.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/Screenshot 2023-09-18 044146.png


--------------------------------------------------------------------------------
/public/Screenshot 2023-09-18 044310.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/Screenshot 2023-09-18 044310.png


--------------------------------------------------------------------------------
/public/Screenshot 2023-09-18 044337.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/Screenshot 2023-09-18 044337.png


--------------------------------------------------------------------------------
/public/Screenshot 2023-09-18 044357.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/Screenshot 2023-09-18 044357.png


--------------------------------------------------------------------------------
/public/Screenshot 2023-09-18 044415.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/HEAD/public/Screenshot 2023-09-18 044415.png


--------------------------------------------------------------------------------
/src/pages/_app.js:
--------------------------------------------------------------------------------
1 | import '@/styles/globals.css'
2 | 
3 | export default function App({ Component, pageProps }) {
4 |   return <Component {...pageProps} />
5 | }
6 | 


--------------------------------------------------------------------------------
/src/pages/api/hello.js:
--------------------------------------------------------------------------------
1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction
2 | 
3 | export default function handler(req, res) {
4 |   res.status(200).json({ name: 'John Doe' })
5 | }
6 | 


--------------------------------------------------------------------------------
/src/pages/_document.js:
--------------------------------------------------------------------------------
 1 | import { Html, Head, Main, NextScript } from 'next/document'
 2 | 
 3 | export default function Document() {
 4 |   return (
 5 |     <Html lang="en">
 6 |       <Head />
 7 |       <body>
 8 |         <Main />
 9 |         <NextScript />
10 |       </body>
11 |     </Html>
12 |   )
13 | }
14 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env*.local
29 | 
30 | # vercel
31 | .vercel
32 | 
33 | # typescript
34 | *.tsbuildinfo
35 | next-env.d.ts
36 | 


--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
 5 |     './src/components/**/*.{js,ts,jsx,tsx,mdx}',
 6 |     './src/app/**/*.{js,ts,jsx,tsx,mdx}',
 7 |   ],
 8 |   theme: {
 9 |     extend: {
10 |       backgroundImage: {
11 |         'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
12 |         'gradient-conic':
13 |           'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
14 |       },
15 |     },
16 |   },
17 |   plugins: [],
18 | }
19 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "apple-dynamic-island-design-toast",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "next dev",
 7 |     "build": "next build",
 8 |     "start": "next start",
 9 |     "lint": "next lint"
10 |   },
11 |   "dependencies": {
12 |     "@heroicons/react": "^2.0.18",
13 |     "autoprefixer": "10.4.15",
14 |     "eslint": "8.49.0",
15 |     "eslint-config-next": "13.4.19",
16 |     "next": "13.4.19",
17 |     "postcss": "8.4.29",
18 |     "react": "18.2.0",
19 |     "react-dom": "18.2.0",
20 |     "react-percentage-bar": "^1.1.1",
21 |     "tailwindcss": "3.3.3"
22 |   }
23 | }
24 | 


--------------------------------------------------------------------------------
/src/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600&display=swap");
 2 | 
 3 | @tailwind base;
 4 | @tailwind components;
 5 | @tailwind utilities;
 6 | 
 7 | html body {
 8 |   font-family: "Noto Sans", sans-serif;
 9 | }
10 | 
11 | .inner-animation {
12 |   animation: innerAnimation 5s ease-in-out;
13 | }
14 | 
15 | @keyframes innerAnimation {
16 |   0% {
17 |     opacity: 0;
18 |   }
19 |   5% {
20 |     opacity: 0;
21 |   }
22 |   11% {
23 |     opacity: 1;
24 |   }
25 |   85% {
26 |     opacity: 1;
27 |   }
28 |   97% {
29 |     opacity: 0;
30 |   }
31 |   100%{
32 |     opacity: 0;
33 |   }
34 | }
35 | 
36 | .pill-animation {
37 |   animation: pillAnimation 5s ease-in-out;
38 | }
39 | 
40 | @keyframes pillAnimation {
41 |   0% {
42 |     width: 0rem;
43 |     height: 0rem;
44 |     top: 2rem;
45 |   }
46 |   5% {
47 |     width: 21rem;
48 |     height: 3rem;
49 |   }
50 |   7% {
51 |     width: 20rem;
52 |     height: 3rem;
53 |     top: 1rem;
54 |   }
55 |   92% {
56 |     scale: 1;
57 |   }
58 |   100% {
59 |     scale: 0;
60 |   }
61 | }
62 | 
63 | /* .horizontal-spin {
64 |   animation: horizontal-spin 0.5s linear;
65 | }
66 | 
67 | @keyframes horizontal-spin {
68 |   0% {
69 |     transform: rotateY(0deg);
70 |   }
71 |   100% {
72 |     transform: rotateY(360deg);
73 |   }
74 | } */
75 | 


--------------------------------------------------------------------------------
/src/components/Toast.js:
--------------------------------------------------------------------------------
 1 | import React from "react";
 2 | import {
 3 |   ExclamationCircleIcon,
 4 |   InformationCircleIcon,
 5 |   ExclamationTriangleIcon,
 6 |   CheckCircleIcon,
 7 | } from "@heroicons/react/24/outline";
 8 | 
 9 | export default function Toast({
10 |   varient = "success",
11 |   heading = "Notification Header",
12 |   isToastVisible,
13 |   setIsToastVisible,
14 | }) {
15 |   setTimeout(() => {
16 |     setIsToastVisible(false);
17 |   }, 4900);
18 |   return (
19 |     <>
20 |       {isToastVisible && (
21 |         <div className="bg-zinc-800 w-80 h-12 rounded-full ring-2 ring-white/30 shadow-xl fixed top-4 pill-animation z-50">
22 |           <div className="flex justify-between items-center h-full w-full px-2 gap-4 inner-animation">
23 |             <img src="/favicon.ico" alt="" className=" rounded-full h-9 w-9" />
24 |             <p className="text-zinc-400 font-medium">{heading}</p>
25 |             {getSymbolIcon(varient)}
26 |           </div>
27 |         </div>
28 |       )}
29 |     </>
30 |   );
31 | }
32 | 
33 | function getSymbolIcon(varient) {
34 |   switch (varient) {
35 |     case "success":
36 |       return (
37 |         <span className="flex justify-center items-center bg-green-300/20 rounded-full h-9 w-9">
38 |           <CheckCircleIcon className="w-6 h-6 text-green-300" />
39 |         </span>
40 |       );
41 |     case "error":
42 |       return (
43 |         <span className="flex justify-center items-center bg-red-300/20 rounded-full h-9 w-9">
44 |           <ExclamationCircleIcon className="w-6 h-6 text-red-300" />
45 |         </span>
46 |       );
47 |     case "warning":
48 |       return (
49 |         <span className="flex justify-center items-center bg-yellow-300/20 rounded-full h-9 w-9">
50 |           <ExclamationTriangleIcon className="w-6 h-6 text-yellow-300" />
51 |         </span>
52 |       );
53 |     case "info":
54 |       return (
55 |         <span className="flex justify-center items-center bg-blue-300/20 rounded-full h-9 w-9">
56 |           <InformationCircleIcon className="w-6 h-6 text-blue-300" />
57 |         </span>
58 |       );
59 |   }
60 | }
61 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # apple-dynamic-island-design-toast  
 2 | 
 3 | ### So I decided to create Apple's iPhone Dynamic Island-style toast ✨ as I was bored.
 4 | #### I used my go-to stack NextJS + TailwindCSS  
 5 | 
 6 | # Preview
 7 | 
 8 | ![image](https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/master/public/Screenshot%202023-09-18%20044337.png)
 9 | ![image](https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/master/public/Screenshot%202023-09-18%20044357.png)
10 | ![image](https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/master/public/Screenshot%202023-09-18%20044415.png)
11 | ![image](https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/master/public/Screenshot%202023-09-18%20044146.png)
12 | ![image](https://raw.githubusercontent.com/VishwaGauravIn/apple-dynamic-island-design-toast/master/public/Screenshot%202023-09-18%20044310.png)
13 | 
14 | 
15 | 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).
16 | 
17 | ## Getting Started
18 | 
19 | First, run the development server:
20 | 
21 | ```bash
22 | npm run dev
23 | # or
24 | yarn dev
25 | # or
26 | pnpm dev
27 | ```
28 | 
29 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
30 | 
31 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
32 | 
33 | [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`.
34 | 
35 | 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.
36 | 
37 | This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
38 | 
39 | ## Learn More
40 | 
41 | To learn more about Next.js, take a look at the following resources:
42 | 
43 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
44 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
45 | 
46 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
47 | 
48 | ## Deploy on Vercel
49 | 
50 | 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.
51 | 
52 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
53 | 


--------------------------------------------------------------------------------
/src/pages/index.js:
--------------------------------------------------------------------------------
 1 | import Toast from "@/components/Toast";
 2 | import React, { useEffect, useState } from "react";
 3 | import { ArrowTopRightOnSquareIcon } from "@heroicons/react/24/outline";
 4 | 
 5 | export default function Index() {
 6 |   const [isToastVisible, setIsToastVisible] = useState(false);
 7 |   const [toastVarient, setToastVarient] = useState("success");
 8 |   const [toastHeading, setToastHeading] = useState("Notification Header");
 9 |   return (
10 |     <main className="flex min-h-screen w-full justify-center items-center">
11 |       {isToastVisible && (
12 |         <Toast
13 |           varient={toastVarient}
14 |           heading={toastHeading}
15 |           isToastVisible={isToastVisible}
16 |           setIsToastVisible={setIsToastVisible}
17 |         />
18 |       )}
19 |       <div className="flex flex-col gap-4">
20 |         <button
21 |           className="flex justify-center items-center bg-green-300/20 text-green-600 ring-green-600/30 hover:bg-green-300 hover:text-black rounded-full py-2 px-6 ring-2 transition-all duration-300 active:scale-95 disabled:saturate-0 disabled:cursor-not-allowed"
22 |           disabled={isToastVisible}
23 |           onClick={() => {
24 |             if (!isToastVisible) {
25 |               setIsToastVisible(true) &
26 |                 setToastVarient("success") &
27 |                 setToastHeading("Success Heading");
28 |             }
29 |           }}
30 |         >
31 |           Show Success Toast
32 |         </button>
33 |         <button
34 |           className="flex justify-center items-center bg-blue-300/20 text-blue-400 ring-blue-600/30 hover:bg-blue-300 hover:text-black rounded-full py-2 px-6 ring-2 transition-all duration-300 active:scale-95 disabled:saturate-0 disabled:cursor-not-allowed"
35 |           disabled={isToastVisible}
36 |           onClick={() => {
37 |             if (!isToastVisible) {
38 |               setIsToastVisible(true) &
39 |                 setToastVarient("info") &
40 |                 setToastHeading("Info Heading");
41 |             }
42 |           }}
43 |         >
44 |           Show Info Toast
45 |         </button>
46 |         <button
47 |           className="flex justify-center items-center bg-yellow-300/20 text-yellow-600 ring-yellow-600/30 hover:bg-yellow-300 hover:text-black rounded-full py-2 px-6 ring-2 transition-all duration-300 active:scale-95 disabled:saturate-0 disabled:cursor-not-allowed"
48 |           disabled={isToastVisible}
49 |           onClick={() => {
50 |             if (!isToastVisible) {
51 |               setIsToastVisible(true) &
52 |                 setToastVarient("warning") &
53 |                 setToastHeading("Warning Heading");
54 |             }
55 |           }}
56 |         >
57 |           Show Warning Toast
58 |         </button>
59 |         <button
60 |           className="flex justify-center items-center bg-red-300/20 text-red-400 ring-red-600/30 hover:bg-red-300 hover:text-black rounded-full py-2 px-6 ring-2 transition-all duration-300 active:scale-95 disabled:saturate-0 disabled:cursor-not-allowed"
61 |           disabled={isToastVisible}
62 |           onClick={() => {
63 |             if (!isToastVisible) {
64 |               setIsToastVisible(true) &
65 |                 setToastVarient("error") &
66 |                 setToastHeading("Error Heading");
67 |             }
68 |           }}
69 |         >
70 |           Show Error Toast
71 |         </button>
72 |       </div>
73 |       <div className="absolute bottom-4 flex flex-col items-center">
74 |         <p className="flex">
75 |           Fork on&nbsp;
76 |           <a
77 |             href="https://github.com/VishwaGauravIn/apple-dynamic-island-design-toast"
78 |             className="text-blue-500 underline underline-offset-2 flex justify-center items-center"
79 |           >
80 |             GitHub
81 |             <ArrowTopRightOnSquareIcon className="w-5 h-5 inline-block ml-1" />
82 |           </a>
83 |         </p>
84 |         <p className="text-sm mt-2 opacity-75">{`</> with 💛 by Vishwa Gaurav`}</p>
85 |       </div>
86 |     </main>
87 |   );
88 | }
89 | 


--------------------------------------------------------------------------------