Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demo List page update #110

Draft
wants to merge 1 commit into
base: master
Choose a base branch
from
Draft

Demo List page update #110

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
135 changes: 94 additions & 41 deletions components/Demo/Demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
import Link from 'next/link';

import { FaBolt } from 'react-icons/fa';

import { Button } from 'components';
import { FiTwitter } from 'react-icons/fi';
import { IconButton } from 'components';

/**
*
Expand All @@ -15,57 +12,113 @@ export interface DemoProps {

function Demo({ data }: DemoProps) {
return (
<article
<div
className="
tw-flex
card-group
tw-flex
tw-flex-col
tw-items-center
tw-py-6
tw-px-6
tw-text-center
tw-border
tw-border-solid
tw-border-gray-200
tw-rounded-lg
tw-bg-white
tw-h-card
tw-bg-base
tw-rounded-2xl
tw-border-white
tw-border-8
tw-shadow-sm
hover:tw-transform hover:tw-scale-105
tw-transition-all
tw-cursor-pointer
tw-overflow-hidden
"
>
<div
className="
tw-text-4xl
tw-mb-4
"
tw-h-48
tw-m-full
tw-bg-red-700
tw-rounded-header
tw-grid
tw-bg-header
tw-bg-gradient-to-bl
tw-from-bgstart
tw-to-bgend
card-group-hover:tw-h-0
"
>
{data.emoji}
<div
className="
tw-text-7xl
tw-text-white
tw-flex
tw-justify-center
tw-items-center
"
>
{data.icon}
{/* {data.emoji} */}
</div>
</div>

<h1
<div
className="
tw-mb-2
tw-text-xl
tw-font-bold
"
tw-flex
tw-flex-col
tw-flex-1
tw-items-center
tw-mx-auto
tw-my-4
"
>
{data.title}
</h1>

<p
className="
tw-mb-8
tw-text-sm
<div
className="
tw-text-center
tw-text-lg
tw-mb-8
"
>
{data.title}
</div>
<div
className="
tw-text-center
tw-text-md
tw-mb-8
tw-text-sm
tw-text-gray-600
tw-line-clamp-3
"
>
{data.desc}
</div>
</div>
<div
className="
tw-flex
tw-h-12
tw-border-t-2
"
>
{data.desc}
</p>
<div>
<IconButton
as="a"
href={`https://twitter.com/${data.creator.twitter}`}
rel="noopener noreferrer"
target="_blank"
ariaLabel="Share on twitter"
className="tw-flex-1 tw-font-thin"
icon={<>{data.creator.name}</>}
/>
</div>

<Link href={`/demos/${data.path}`} passHref>
<Button as="a" leftIcon={<FaBolt />}>
Try it
</Button>
</Link>
</article>
<div>
<IconButton
as="a"
href={`https://twitter.com/${data.creator.twitter}`}
rel="noopener noreferrer"
target="_blank"
ariaLabel="Share on twitter"
icon={<FiTwitter />}
/>
</div>
</div>
</div>
);
}

Expand Down
4 changes: 3 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,16 @@
},
"dependencies": {
"@bradgarropy/next-seo": "^1.0.0",
"@fortawesome/free-solid-svg-icons": "^5.15.4",
"@fortawesome/react-fontawesome": "^0.1.16",
"filter-react-props": "^0.0.4",
"framer-motion": "^4.1.17",
"next": "11.1.2",
"next-pwa": "^5.3.1",
"nextjs-progressbar": "^0.0.11",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-icons": "^4.2.0"
"react-icons": "^4.3.1"
},
"devDependencies": {
"@tailwindcss/forms": "^0.3.4",
Expand Down
8 changes: 4 additions & 4 deletions pages/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ export default function Home() {
return (
<>
<InputSearch
placeholder="Search by API names"
placeholder="Search by API or contributor name"
value={searchText}
onClear={handleClear}
onChange={handleChange}
Expand All @@ -38,10 +38,10 @@ export default function Home() {
md:tw-mt-8
tw-grid
tw-grid-cols-1
tw-gap-4
tw-gap-10
md:tw-grid-cols-2
lg:tw-grid-cols-3
xl:tw-grid-cols-4
lg:tw-grid-cols-4
xl:tw-grid-cols-5
"
>
{demos.map((demo, index) => (
Expand Down
6 changes: 4 additions & 2 deletions styles/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,14 @@
@tailwind components;
@tailwind utilities;

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

html,
body {
padding: 0;
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,
Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;
font-family: 'Roboto', sans-serif;
background: #eef2f3;
}

* {
Expand Down
24 changes: 24 additions & 0 deletions tailwind.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ module.exports = {
'30px': '30px',
...defaultTheme.fontSize,
},

borderWidth: {
none: '0',
1: '1px',
Expand All @@ -37,9 +38,22 @@ module.exports = {
'5px': '5px',
'10px': '10px',
'30px': '30px',
header: '100% 0% 100% 0% / 0% 50% 50% 100%',
half: '50%',
...defaultTheme.borderRadius,
},
boxShadow: {
sm: 'rgba(0, 0, 0, 0.19) 0px 10px 20px,rgba(0, 0, 0, 0.23) 0px 6px 6px',
none: 'none',
},
left: {
logo: '-100',
dp: '-100',
},
top: {
logo: '-100',
dp: '-100',
},
extend: {
colors: {
prod: '#00ebff',
Expand All @@ -48,7 +62,17 @@ module.exports = {
payments: '#ebebeb',
demo: '#f4f4f4',
link: '#551A8B',
bgstart: '#3f2b96',
bgend: '#a8c0ff',
},
height: {
card: '30rem',
},
backgroundColor: {
card: '#64B5F6',
base: '#FFF',
},
boxShadow: ['active'],
spacing: {
'300px': '300px',
'100px': '100px',
Expand Down
13 changes: 13 additions & 0 deletions utils/data/demos.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,17 @@
import {
FaFileAlt,
FaDesktop,
FaRegClipboard,
FaBroadcastTower,
FaWifi,
} from 'react-icons/fa';

const data = [
{
id: '_file_system_api_',
title: 'File System API',
emoji: '📂',
icon: <FaFileAlt />,
desc: "Only for Chromium-based web browsers. The File System Access API makes it easy and simple to read and write the user's files and access the file system.",
path: 'filesystem-api',
canIUseURL: 'https://caniuse.com/mdn-api_window_showopenfilepicker',
Expand All @@ -15,6 +24,7 @@ const data = [
id: '_fullscreen_api_',
title: 'FullScreen API',
emoji: '📺',
icon: <FaDesktop />,
desc: 'The Fullscreen API adds methods to present a specific Element (and its descendants) in full-screen mode, and to exit full-screen mode once it is no longer needed.',
path: 'fullscreen',
canIUseURL: 'https://caniuse.com/fullscreen',
Expand All @@ -28,6 +38,7 @@ const data = [
id: '_clipboard_api_',
title: 'Clipboard API',
emoji: '📋',
icon: <FaRegClipboard />,
desc: 'The Clipboard API provides the ability to respond to clipboard commands (cut, copy, and paste) as well as to asynchronously read from and write to the system clipboard.',
path: 'clipboard',
canIUseURL: 'https://caniuse.com/async-clipboard',
Expand All @@ -41,6 +52,7 @@ const data = [
id: '_broadcast_api_',
title: 'Broadcast',
emoji: '📡',
icon: <FaBroadcastTower />,
desc: 'The BroadcastChannel is a named channel that allows communication between different documents (in different windows, tabs, frames or iframes) of the same origin.',
path: 'broadcast-channel',
canIUseURL: 'https://caniuse.com/broadcastchannel',
Expand All @@ -54,6 +66,7 @@ const data = [
id: '_network_info_api_',
title: 'Network Info',
emoji: '📶',
icon: <FaWifi />,
desc: "The Network Information API provides information about the system's connection in terms of general connection type (e.g., 'wifi', 'cellular', etc.).",
path: 'network-information',
canIUseURL: 'https://caniuse.com/netinfo',
Expand Down
27 changes: 23 additions & 4 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -956,6 +956,25 @@
minimatch "^3.0.4"
strip-json-comments "^3.1.1"

"@fortawesome/fontawesome-common-types@^0.2.36":
version "0.2.36"
resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-0.2.36.tgz#b44e52db3b6b20523e0c57ef8c42d315532cb903"
integrity sha512-a/7BiSgobHAgBWeN7N0w+lAhInrGxksn13uK7231n2m8EDPE3BMCl9NZLTGrj9ZXfCmC6LM0QLqXidIizVQ6yg==

"@fortawesome/free-solid-svg-icons@^5.15.4":
version "5.15.4"
resolved "https://registry.yarnpkg.com/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-5.15.4.tgz#2a68f3fc3ddda12e52645654142b9e4e8fbb6cc5"
integrity sha512-JLmQfz6tdtwxoihXLg6lT78BorrFyCf59SAwBM6qV/0zXyVeDygJVb3fk+j5Qat+Yvcxp1buLTY5iDh1ZSAQ8w==
dependencies:
"@fortawesome/fontawesome-common-types" "^0.2.36"

"@fortawesome/react-fontawesome@^0.1.16":
version "0.1.16"
resolved "https://registry.yarnpkg.com/@fortawesome/react-fontawesome/-/react-fontawesome-0.1.16.tgz#ce7665490214e20f929368d6b65f68884a99276a"
integrity sha512-aLmzDwC9rEOAJv2UJdMns89VZR5Ry4IHu5dQQh24Z/lWKEm44lfQr1UNalZlkUaQN8d155tNh+CS7ntntj1VMA==
dependencies:
prop-types "^15.7.2"

"@hapi/[email protected]":
version "5.0.2"
resolved "https://registry.yarnpkg.com/@hapi/accept/-/accept-5.0.2.tgz#ab7043b037e68b722f93f376afb05e85c0699523"
Expand Down Expand Up @@ -5552,10 +5571,10 @@ [email protected]:
object-assign "^4.1.1"
scheduler "^0.20.2"

react-icons@^4.2.0:
version "4.2.0"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.2.0.tgz#6dda80c8a8f338ff96a1851424d63083282630d0"
integrity sha512-rmzEDFt+AVXRzD7zDE21gcxyBizD/3NqjbX6cmViAgdqfJ2UiLer8927/QhhrXQV7dEj/1EGuOTPp7JnLYVJKQ==
react-icons@^4.3.1:
version "4.3.1"
resolved "https://registry.yarnpkg.com/react-icons/-/react-icons-4.3.1.tgz#2fa92aebbbc71f43d2db2ed1aed07361124e91ca"
integrity sha512-cB10MXLTs3gVuXimblAdI71jrJx8njrJZmNMEMC+sQu5B/BIOmlsAjskdqpn81y8UBVEGuHODd7/ci5DvoSzTQ==

[email protected]:
version "17.0.2"
Expand Down