Skip to content

Instantly share code, notes, and snippets.

:electron:

Pedro Nauck pedronauck

:electron:
View GitHub Profile
@pedronauck
pedronauck / Subscribe.tsx
Created Jul 11, 2020
Tailwind (with twin.macro), Emotion, NextJS and ChakraUI
View Subscribe.tsx
/** @jsx jsx */
import { jsx, css } from '@emotion/core'
import tw from 'twin.macro'
import { Button, Input } from 'systems/Core'
export const Subscribe: React.FC = () => {
return (
<div css={styles.Root}>
<h4>Subscribe to our newsletter</h4>
@pedronauck
pedronauck / Header.tsx
Created Jul 11, 2020
Tailwind, PostCSS, Styled-JSX and NextJS
View Header.tsx
import React from 'react'
import { Link } from 'systems/Core/Link'
import css from 'styled-jsx/css'
export const Header = () => {
return (
<header className="Root">
<img src="/logo.svg" width={100} />
<div className="MainMenu">
<ul className="MenuList">
View machine.js
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@pedronauck
pedronauck / mix.exs
Created Nov 1, 2019 — forked from muziyoshiz/mix.exs
Sample of GraphQL Relay server on Phoenix
View mix.exs
# mix.exs
defmodule PhoenixRelaySample.Mixfile do
use Mix.Project
def project do
[app: :phoenix_relay_sample,
version: "0.0.1",
elixir: "~> 1.2",
elixirc_paths: elixirc_paths(Mix.env),
compilers: [:phoenix, :gettext] ++ Mix.compilers,
@pedronauck
pedronauck / Button.tsx
Last active Apr 15, 2019
Beauty Button
View Button.tsx
import * as React from 'react'
import rem from 'polished/lib/helpers/rem'
import styled from 'styled-components'
import * as t from 'PRIVATE_PACKAGE'
import { Icon } from '../Icon'
import { useSpinner } from '../hooks/useSpinner'
import * as appearances from './appearances'
export const scales = {
@pedronauck
pedronauck / useHotkeys.ts
Created Dec 11, 2018
usePopper and useHotkeys hooks
View useHotkeys.ts
import { useEffect } from 'react'
import hotkeys from 'hotkeys-js'
export const useHotkeys = (key: string, cb: () => any, inputs?: any[]) => {
useEffect(() => {
hotkeys(key, cb)
return () => hotkeys.unbind(key)
}, inputs)
}
@pedronauck
pedronauck / rescss.jsx
Created Apr 24, 2018
lib to add responsive css-in-js
View rescss.jsx
import styled from 'react-emotion'
import { rescss } from 'rescss'
const mq = resprops([
'@media(min-width: 420px)',
'@media(min-width: 920px)',
'@media(min-width: 1120px)'
])
const Text = styled('div')`
View react-pose.jsx
import React from 'react'
import pose from 'react-pose'
const AnimatedDiv = pose('div')({
opened: { scale: 1 },
closed: { scale: 2 },
})
export const MyComponent = ({ opened }) => (
<AnimatedDiv state="opened">
@pedronauck
pedronauck / cloudSettings
Last active Oct 26, 2017
Visual Studio Code Settings Sync Gist
View cloudSettings
{"lastUpload":"2017-10-26T19:31:38.634Z","extensionVersion":"v2.8.3"}
@pedronauck
pedronauck / fuse.ts
Created Oct 14, 2017
Fusebox config example
View fuse.ts
import {
FuseBox,
BabelPlugin,
QuantumPlugin,
WebIndexPlugin,
TypeScriptHelpers,
Sparky,
} from 'fuse-box'
import * as path from 'path'
You can’t perform that action at this time.