├── .gitignore ├── vercel.json ├── public ├── og.png ├── screenshot.png └── assets │ ├── photo.png │ ├── map-dark.png │ ├── map-light.png │ ├── podcast-cover.png │ ├── wallpaper-dark.jpg │ └── wallpaper-light.jpg ├── .babelrc ├── src ├── index.js ├── icons │ ├── folder.jsx │ ├── list.jsx │ ├── iphone.jsx │ ├── weather.jsx │ └── podcasts.jsx ├── index.html ├── widgets │ ├── photos.jsx │ ├── weather.jsx │ ├── reminders.jsx │ ├── podcasts.jsx │ ├── maps.jsx │ ├── notes.jsx │ ├── calendar.jsx │ └── battery.jsx └── widgets.jsx ├── README.md ├── webpack.config.js └── package.json /.gitignore: -------------------------------------------------------------------------------- 1 | /node_modules 2 | /build 3 | .DS_Store 4 | -------------------------------------------------------------------------------- /vercel.json: -------------------------------------------------------------------------------- 1 | { 2 | "github": { 3 | "silent": true 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /public/og.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/og.png -------------------------------------------------------------------------------- /public/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/screenshot.png -------------------------------------------------------------------------------- /public/assets/photo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/photo.png -------------------------------------------------------------------------------- /public/assets/map-dark.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/map-dark.png -------------------------------------------------------------------------------- /public/assets/map-light.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/map-light.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["@babel/preset-env", "@babel/preset-react"], 3 | "plugins": ["styled-jsx/babel"] 4 | } 5 | -------------------------------------------------------------------------------- /public/assets/podcast-cover.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/podcast-cover.png -------------------------------------------------------------------------------- /public/assets/wallpaper-dark.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/wallpaper-dark.jpg -------------------------------------------------------------------------------- /public/assets/wallpaper-light.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ofekashery/ios14-widgets/HEAD/public/assets/wallpaper-light.jpg -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import Widgets from './widgets'; 4 | 5 | ReactDOM.render( 6 | 7 | 8 | , 9 | document.getElementById('app') 10 | ); 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # iOS 14 Widgets 2 | 3 | iOS 14 Widgets designs implemented in React.js 4 | 5 | ### Getting Started 6 | 7 | ```sh 8 | $ npm install 9 | $ npm start 10 | ``` 11 | 12 | Then head over to [localhost:3000](http://localhost:3000) to see it live! 13 | 14 | The page will reload if you make edits. 15 | 16 | ![Screenshot](https://ios14-widgets.vercel.app/screenshot.png) 17 | -------------------------------------------------------------------------------- /src/icons/folder.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const FolderIcon = ({ size = 24, color = 'var(--foreground)', ...props }) => { 4 | return ( 5 | 6 | 10 | 11 | ); 12 | }; 13 | 14 | export default FolderIcon; 15 | -------------------------------------------------------------------------------- /src/icons/list.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const ListIcon = ({ size = 24, color = 'var(--foreground)', ...props }) => { 4 | return ( 5 | 6 | 10 | 11 | ); 12 | }; 13 | 14 | export default ListIcon; 15 | -------------------------------------------------------------------------------- /webpack.config.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const HtmlWebpackPlugin = require('html-webpack-plugin'); 3 | const CopyPlugin = require('copy-webpack-plugin'); 4 | 5 | module.exports = { 6 | entry: './src/index.js', 7 | output: { 8 | path: path.join(__dirname, 'build'), 9 | filename: 'bundle.js' 10 | }, 11 | module: { 12 | rules: [ 13 | { 14 | test: /\.(js|jsx)$/, 15 | exclude: /node_modules/, 16 | use: { 17 | loader: 'babel-loader' 18 | } 19 | } 20 | ] 21 | }, 22 | plugins: [ 23 | new CopyPlugin({ 24 | patterns: [{ from: 'public' }] 25 | }), 26 | new HtmlWebpackPlugin({ 27 | template: './src/index.html' 28 | }) 29 | ], 30 | resolve: { 31 | extensions: ['.js', '.jsx'] 32 | }, 33 | devServer: { 34 | inline: true, 35 | port: 3000 36 | } 37 | }; 38 | -------------------------------------------------------------------------------- /src/icons/iphone.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const iPhoneIcon = ({ size = 24, color = 'var(--foreground)', ...props }) => { 4 | return ( 5 | 6 | 16 | 20 | 21 | 22 | ); 23 | }; 24 | 25 | export default iPhoneIcon; 26 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ios14-widgets", 3 | "description": "iOS 14 Widgets designs implemented in React.js", 4 | "version": "1.0.0", 5 | "author": "Ofek Ashery", 6 | "license": "MIT", 7 | "scripts": { 8 | "start": "webpack-dev-server --open --hot --mode development", 9 | "build": "webpack --mode production" 10 | }, 11 | "dependencies": { 12 | "react": "^16.13.1", 13 | "react-dom": "^16.13.1", 14 | "styled-jsx": "^3.3.0" 15 | }, 16 | "devDependencies": { 17 | "@babel/core": "^7.10.4", 18 | "@babel/preset-env": "^7.10.4", 19 | "@babel/preset-react": "^7.10.4", 20 | "babel-loader": "^8.1.0", 21 | "copy-webpack-plugin": "^6.0.3", 22 | "html-webpack-plugin": "^4.3.0", 23 | "webpack": "^4.43.0", 24 | "webpack-cli": "^3.3.12", 25 | "webpack-dev-server": "^3.11.0" 26 | }, 27 | "repository": { 28 | "type": "git", 29 | "url": "https://github.com/ofekashery/ios14-widgets.git" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | iOS 14 Widgets 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | -------------------------------------------------------------------------------- /src/widgets/photos.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | // Photo by James Donovan 4 | // https://pexels.com/@jmsdono 5 | 6 | const PhotosWidget = () => { 7 | return ( 8 |
9 |
10 | Featured 11 |
12 | Photo 13 |
14 | 15 | 35 |
36 | ); 37 | }; 38 | 39 | export default PhotosWidget; 40 | -------------------------------------------------------------------------------- /src/widgets/weather.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import WeatherIcon from '../icons/weather'; 3 | 4 | const WeatherWidget = () => { 5 | return ( 6 |
7 |

Cupertino

8 |

27°

9 | 10 |
11 | 12 |

13 | Partly Cloudy 14 |
15 | H: 25° L: 21° 16 |

17 |
18 | 19 | 51 |
52 | ); 53 | }; 54 | 55 | export default WeatherWidget; 56 | -------------------------------------------------------------------------------- /src/widgets/reminders.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ListIcon from '../icons/list'; 3 | 4 | const RemindersWidget = () => { 5 | return ( 6 |
7 |

Reminders

8 | 4 9 |
10 | 11 |
12 | 13 | 50 |
51 | ); 52 | }; 53 | 54 | export default RemindersWidget; 55 | -------------------------------------------------------------------------------- /src/widgets/podcasts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PodcastsIcon from '../icons/podcasts'; 3 | 4 | const PodcastsWidget = () => { 5 | return ( 6 |
7 |
8 | 9 | 10 |
11 |

NOW PLAYING

12 |
What's new and what's Next.js
13 | 14 | 49 |
50 | ); 51 | }; 52 | 53 | export default PodcastsWidget; 54 | -------------------------------------------------------------------------------- /src/widgets/maps.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const MapsWidget = () => { 4 | return ( 5 |
6 |
7 |
Apple HQ
8 |

ETA 08:53

9 |
10 | 11 | 52 |
53 | ); 54 | }; 55 | 56 | export default MapsWidget; 57 | -------------------------------------------------------------------------------- /src/widgets/notes.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import FolderIcon from '../icons/folder'; 3 | 4 | const NotesWidget = () => { 5 | return ( 6 |
7 |
8 | 9 |
10 |
11 |
12 |
Meeting Notes
13 |

6 Notes

14 |
15 |
16 |
School
17 |

28 Notes

18 |
19 |
20 | 21 | 63 |
64 | ); 65 | }; 66 | 67 | export default NotesWidget; 68 | -------------------------------------------------------------------------------- /src/icons/weather.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const WeatherIcon = ({ size = 24, color = 'var(--foreground)', ...props }) => { 4 | return ( 5 | 6 | 10 | 14 | 15 | ); 16 | }; 17 | 18 | export default WeatherIcon; 19 | -------------------------------------------------------------------------------- /src/widgets/calendar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const days = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']; 4 | 5 | const CalendarWidget = () => { 6 | const now = new Date(); 7 | const dayName = days[now.getDay()]; 8 | 9 | return ( 10 |
11 |

{dayName}

12 |

{now.getDate()}

13 | 14 |
15 |
16 |
17 |
WWDC Keynote
18 |

Online

19 | 09:00 - 11:30 20 |
21 |
22 | 23 | 74 |
75 | ); 76 | }; 77 | 78 | export default CalendarWidget; 79 | -------------------------------------------------------------------------------- /src/widgets/battery.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import IphoneIcon from '../icons/iphone'; 3 | 4 | const PERCENTAGE = 84; 5 | 6 | const BatteryWidget = () => { 7 | return ( 8 |
9 |
10 |
11 | 12 |
13 | 14 | 15 | 16 | 17 |
18 |

{PERCENTAGE}%

19 | 75 |
76 | ); 77 | }; 78 | 79 | export default BatteryWidget; 80 | -------------------------------------------------------------------------------- /src/icons/podcasts.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | const PodcastsIcon = ({ size = 24, color = 'var(--foreground)', ...props }) => { 4 | return ( 5 | 6 | 10 | 11 | ); 12 | }; 13 | 14 | export default PodcastsIcon; 15 | -------------------------------------------------------------------------------- /src/widgets.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import BatteryWidget from './widgets/battery'; 3 | import CalendarWidget from './widgets/calendar'; 4 | import NotesWidget from './widgets/notes'; 5 | import PodcastsWidget from './widgets/podcasts'; 6 | import WeatherWidget from './widgets/weather'; 7 | import RemindersWidget from './widgets/reminders'; 8 | import MapsWidget from './widgets/maps'; 9 | import PhotosWidget from './widgets/photos'; 10 | 11 | const Widgets = () => { 12 | return ( 13 |
14 | {['light', 'dark'].map((theme) => ( 15 |
16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 |
27 | ))} 28 | 35 | 111 |
112 | ); 113 | }; 114 | 115 | export default Widgets; 116 | --------------------------------------------------------------------------------