Skip to content

Instantly share code, notes, and snippets.

View pedronauck's full-sized avatar

Pedro Nauck pedronauck

View GitHub Profile
@pedronauck
pedronauck / Subscribe.tsx
Created July 11, 2020 18:52
Tailwind (with twin.macro), Emotion, NextJS and ChakraUI
/** @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 July 11, 2020 00:11
Tailwind, PostCSS, Styled-JSX and NextJS
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">
@pedronauck
pedronauck / machine.js
Created December 4, 2019 21:32
Generated by XState Viz: https://xstate.js.org/viz
// Available variables:
// - Machine
// - interpret
// - assign
// - send
// - sendParent
// - spawn
// - raise
// - actions
@pedronauck
pedronauck / mix.exs
Created November 1, 2019 03:31 — forked from muziyoshiz/mix.exs
Sample of GraphQL Relay server on Phoenix
# 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 April 15, 2019 18:57
Beauty Button
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 December 11, 2018 02:03
usePopper and useHotkeys hooks
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 April 24, 2018 21:01
lib to add responsive css-in-js
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')`
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 October 26, 2017 19:31
Visual Studio Code Settings Sync Gist
{"lastUpload":"2017-10-26T19:31:38.634Z","extensionVersion":"v2.8.3"}
@pedronauck
pedronauck / fuse.ts
Created October 14, 2017 21:16
Fusebox config example
import {
FuseBox,
BabelPlugin,
QuantumPlugin,
WebIndexPlugin,
TypeScriptHelpers,
Sparky,
} from 'fuse-box'
import * as path from 'path'