Skip to content

Commit 5e40b46

Browse files
author
Ashutosh Hathidara
committed
Adding the first version of code
1 parent bf63a06 commit 5e40b46

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1194
-1
lines changed

‎.gitignore

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,13 @@
33
##
44
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
55

6+
# gatsby-specific files
7+
/node_modules
8+
/.pnp
9+
/build
10+
/public
11+
package-lock.json
12+
613
# User-specific files
714
*.rsuser
815
*.suo

‎.prettierignore

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
build
2+
coverage
3+
public
4+
node_modules
5+
.cache
6+
package*.json

‎.prettierrc.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
{}

‎README.md

Lines changed: 28 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,28 @@
1-
# react-liquidswipe
1+
<p align="center">
2+
<img src="src/images/icon.png" align="center" height="150"></img>
3+
</p>
4+
5+
<h1 align="center"> 🚀 React LiquidSwipe</h1>
6+
<h3 align="center"> Very smooth component transition animation with liquid swipe effect. </h3>
7+
8+
<p align="center">
9+
<a href="http://hits.dwyl.com/ashutosh1919/react-liquidswipe"><img alt="HitCounts" src="http://hits.dwyl.com/ashutosh1919/react-liquidswipe.svg" /></a>
10+
<a href="https://nodejs.org/en/blog/release/v12.18.3/"><img alt="NodeJS" src="https://img.shields.io/badge/node-12.18.3-important?style=flat-square" /></a>
11+
<a href="https://www.npmjs.com/package/npm/v/6.14.6"><img alt="NPM" src="https://img.shields.io/badge/npm-6.14.6-61DAFB?style=flat-square" /></a>
12+
<a href="https://www.gatsbyjs.com/"><img alt="Made With Gatsby" src="https://img.shields.io/badge/made%20with-gatsby-blueviolet?style=flat-square" /></a>
13+
<a href="https://github.com/prettier/prettier"><img alt="code style: prettier" src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square?style=flat-square" /></a>
14+
<br/>
15+
<a href="https://app.netlify.com/sites/ashutosh1919portfolio/deploys"><img alt="Netlify Status" src="https://api.netlify.com/api/v1/badges/abf59f82-3251-4040-b24c-949b86691642/deploy-status?style=flat-square" /></a>
16+
<a href="https://travis-ci.org/badges/badgerbadgerbadger"><img alt="Build Status" src="http://img.shields.io/travis/badges/badgerbadgerbadger.svg?style=flat-square?style=flat-square" /></a>
17+
<a href="http://badges.mit-license.org/"><img alt="License" src="http://img.shields.io/:license-mit-blue.svg?style=flat-square?style=flat-square" /></a>
18+
<a href="https://github.com/ashutosh1919/react-liquidswipe/commits/main"><img alt="Maintenance" src="https://img.shields.io/badge/maintained-yes-green.svg?style=flat-square" /></a>
19+
<a href="http://badges.mit-license.org/"><img alt="Website" src="https://img.shields.io/badge/website-up-yellow?style=flat-square" /></a>
20+
<a href="https://ashutoshhathidara.com/"><img alt="License" src="http://img.shields.io/:license-mit-blue.svg?style=flat-square?style=flat-square" /></a>
21+
<a href="https://img.shields.io/badge/price-free-ff69b4"><img alt="Price" src="https://img.shields.io/badge/price-free-ff69b4?style=flat-square" /></a>
22+
</p>
23+
24+
<p align="center">
25+
<a href="https://ashutosh1919.github.io" target="_blank">
26+
<img src="src/images/demo.gif"></img>
27+
</a>
28+
</p>

‎gatsby-config.js

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
module.exports = {
2+
siteMetadata: {
3+
title: "Apple Clay Devices Showcase",
4+
},
5+
plugins: [
6+
{
7+
resolve: "gatsby-plugin-web-font-loader",
8+
options: {
9+
custom: {
10+
families: [
11+
"SF Pro Display Bold, SF Pro Display Light, SF Pro Display Semibold",
12+
],
13+
urls: ["src/static/fonts/fonts.css"],
14+
},
15+
},
16+
},
17+
"gatsby-plugin-theme-ui",
18+
{
19+
resolve: "gatsby-plugin-google-analytics",
20+
options: {
21+
trackingId: "UA-158726526-1",
22+
},
23+
},
24+
"gatsby-plugin-sharp",
25+
"gatsby-plugin-react-helmet",
26+
"gatsby-plugin-sitemap",
27+
"gatsby-plugin-offline",
28+
{
29+
resolve: "gatsby-plugin-manifest",
30+
options: {
31+
icon: "src/images/icon.png",
32+
},
33+
},
34+
{
35+
resolve: "gatsby-transformer-sharp",
36+
},
37+
"gatsby-transformer-json",
38+
{
39+
resolve: "gatsby-source-filesystem",
40+
options: {
41+
name: "images",
42+
path: "./src/images/",
43+
},
44+
__key: "images",
45+
},
46+
{
47+
resolve: `gatsby-source-filesystem`,
48+
options: {
49+
name: `data`,
50+
path: `./src/data/`,
51+
},
52+
__key: "data",
53+
},
54+
],
55+
};

‎package.json

Lines changed: 61 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
{
2+
"private": true,
3+
"name": "react-liquidswipe",
4+
"description": "Apple Clay Devices Showcase",
5+
"license": "MIT",
6+
"author": "Ashutosh Hathidara",
7+
"version": "1.0.0",
8+
"scripts": {
9+
"build": "gatsby build",
10+
"clean": "gatsby clean",
11+
"develop": "gatsby develop",
12+
"serve": "gatsby serve",
13+
"start": "gatsby develop"
14+
},
15+
"dependencies": {
16+
"@fortawesome/fontawesome-svg-core": "^1.2.32",
17+
"@fortawesome/free-solid-svg-icons": "^5.15.1",
18+
"@fortawesome/react-fontawesome": "^0.1.14",
19+
"@react-icons/all-files": "^4.1.0",
20+
"@theme-ui/typography": "^0.3.5",
21+
"gatsby": "^2.26.1",
22+
"gatsby-image": "^2.8.0",
23+
"gatsby-plugin-fontawesome-css": "^1.0.0",
24+
"gatsby-plugin-google-analytics": "^2.8.0",
25+
"gatsby-plugin-manifest": "^2.9.0",
26+
"gatsby-plugin-offline": "^3.7.0",
27+
"gatsby-plugin-react-helmet": "^3.7.0",
28+
"gatsby-plugin-sharp": "^2.11.1",
29+
"gatsby-plugin-sitemap": "^2.9.0",
30+
"gatsby-plugin-theme-ui": "^0.3.5",
31+
"gatsby-plugin-web-font-loader": "^1.0.4",
32+
"gatsby-source-filesystem": "^2.8.0",
33+
"gatsby-transformer-json": "^2.8.0",
34+
"gatsby-transformer-sharp": "^2.9.0",
35+
"react": "^16.13.1",
36+
"react-dom": "^16.13.1",
37+
"react-helmet": "^6.1.0",
38+
"react-spring": "^8.0.27",
39+
"react-use-gesture": "^9.0.0-beta.11",
40+
"styled-components": "^5.2.1",
41+
"theme-ui": "^0.3.5"
42+
},
43+
"devDependencies": {
44+
"husky": "^4.3.6",
45+
"lint-staged": "^10.5.3",
46+
"prettier": "2.2.1",
47+
"prettier-package-json": "^2.1.3"
48+
},
49+
"keywords": [
50+
"gatsby"
51+
],
52+
"husky": {
53+
"hooks": {
54+
"pre-commit": "lint-staged"
55+
}
56+
},
57+
"lint-staged": {
58+
"*.json": "prettier-package-json --write",
59+
"*.{js,css,md}": "prettier --write"
60+
}
61+
}

‎src/components/button.js

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
/** @jsx jsx */
2+
import { useState } from "react";
3+
import { jsx, Styled } from "theme-ui";
4+
5+
export default function Button(props) {
6+
const background = props.theme["background"];
7+
const primary = props.theme["primary"];
8+
return (
9+
<Styled.a
10+
href={props.data["data"]["buttonLink"]}
11+
target="_blank"
12+
rel="noopener noreferrer"
13+
>
14+
<Styled.div
15+
sx={{
16+
cursor: "pointer",
17+
m: 0,
18+
py: [6],
19+
px: [7, 8],
20+
border: "1px solid " + primary,
21+
borderRadius: 20,
22+
backgroundColor: primary,
23+
"@keyframes fadeInDivRev": {
24+
from: {
25+
backgroundColor: background,
26+
},
27+
to: {
28+
backgroundColor: primary,
29+
},
30+
},
31+
"@keyframes fadeInDiv": {
32+
from: {
33+
backgroundColor: primary,
34+
},
35+
to: {
36+
backgroundColor: background,
37+
},
38+
},
39+
"@keyframes fadeInTextRev": {
40+
from: {
41+
color: primary,
42+
},
43+
to: {
44+
color: background,
45+
},
46+
},
47+
"@keyframes fadeInText": {
48+
from: {
49+
color: background,
50+
},
51+
to: {
52+
color: primary,
53+
},
54+
},
55+
animationName: "fadeInDivRev",
56+
animationDuration: "0.7s",
57+
"#buttonText": {
58+
animationName: "fadeInTextRev",
59+
animationDuration: "0.7s",
60+
},
61+
"&:hover": {
62+
animation: "fadeInDiv 0.7s ease forwards",
63+
},
64+
"&:hover #buttonText": {
65+
animation: "fadeInText 0.7s ease forwards",
66+
},
67+
}}
68+
>
69+
<Styled.h5
70+
id="buttonText"
71+
sx={{
72+
fontSize: [3, 3, 4],
73+
color: background,
74+
}}
75+
>
76+
{props.data["data"]["buttonText"]}
77+
</Styled.h5>
78+
</Styled.div>
79+
</Styled.a>
80+
);
81+
}

‎src/components/colors.js

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
export const Colors = {
2+
watch: {
3+
background: "#222324",
4+
text: "#E7B996",
5+
primary: "#E7B996",
6+
},
7+
iphone: {
8+
background: "#E7B996",
9+
text: "#871003",
10+
primary: "#871003",
11+
},
12+
ipad: {
13+
background: "#871003",
14+
text: "#62A461",
15+
primary: "#62A461",
16+
},
17+
mac: {
18+
background: "#62A461",
19+
text: "#300584",
20+
primary: "#300584",
21+
},
22+
mouse: {
23+
background: "#300584",
24+
text: "#D8D8D8",
25+
primary: "#D8D8D8",
26+
},
27+
airpod: {
28+
background: "#D8D8D8",
29+
text: "#222324",
30+
primary: "#222324",
31+
},
32+
};

‎src/components/devicepage.js

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from "react";
2+
import Layout from "./layout";
3+
import Header from "./header";
4+
import Showcase from "./showcase";
5+
import Footer from "./footer";
6+
import { Colors } from "./colors";
7+
8+
export const DevicePage = ({ data }) => {
9+
// console.log(data["data"]["id"]);
10+
// const [colorMode, setColorMode] = useColorMode();
11+
// setColorMode(data["data"]["id"]);
12+
const selectedColor = Colors[data["data"]["id"]];
13+
return (
14+
<>
15+
<Layout theme={selectedColor}>
16+
<Header data={data} theme={selectedColor} />
17+
<Showcase data={data} theme={selectedColor} />
18+
<Footer data={data} theme={selectedColor} />
19+
</Layout>
20+
</>
21+
);
22+
};

0 commit comments

Comments
 (0)