Skip to content

Instantly share code, notes, and snippets.

View chunkydotdev's full-sized avatar
🍦
Thinking of icecream

Magnus Junghard chunkydotdev

🍦
Thinking of icecream
View GitHub Profile
@chunkydotdev
chunkydotdev / gitpolljob.sh
Created March 17, 2023 12:17
Polls the local git-repository for changes and updates if any are found
cd /home/dev/bunny-game-api
[ $(git rev-parse HEAD) = $(git ls-remote $(git rev-parse --abbrev-ref @{u} | \
sed 's/\// /g') | cut -f1) ] && echo up to date || (git pull && docker compose up -d --build api database)
@chunkydotdev
chunkydotdev / Component1.tsx
Last active March 14, 2022 19:23
styled components using the open structured theme
import styled from 'styled-components'
import { Colors, Spacings } from '../theme.ts'
const PrimaryButton = styled.button`
background-color: ${Colors.primary};
border: 0;
margin-bottom: ${Spacings.md};
`
const Component1 = () => {
@chunkydotdev
chunkydotdev / theme.ts
Created March 14, 2022 16:21
Open theme structure
export const Spacings = {
xs: '4px',
sm: '8px',
md: '16px',
lg: '32px',
xl: '64px'
}
export const colors = {
primary: '#00A6FB',
@chunkydotdev
chunkydotdev / Component1.tsx
Last active March 14, 2022 19:23
A component that uses some theme variables from ThemeProvider
import styled from 'styled-components'
const PrimaryButton = styled.button`
background-color: ${({theme}) => theme.colors.primary};
border: 0;
margin-bottom: ${({theme}) => theme.spacings.md};
`
const Component1 = () => {
@chunkydotdev
chunkydotdev / App.tsx
Created March 14, 2022 15:56
Applying theme provider with styled components
import { ThemeProvider } from 'styled-components'
import { theme } from './theme.ts'
const App = () => {
return <>
<ThemeProvider theme={theme}>
<Component1 />
<Component2 />
<Component3 />
@chunkydotdev
chunkydotdev / theme.ts
Created March 14, 2022 15:52
Small styled components theme
export const theme = {
spacings: {
xs: '4px',
sm: '8px',
md: '16px',
lg: '32px',
xl: '64px'
},
colors: {
primary: '#00A6FB',
@chunkydotdev
chunkydotdev / efficient-fishbubble.tsx
Created March 9, 2022 15:13
Fishbubble using the attrs method
import styled from 'styled-components'
const FishBubble = styled.div.attrs(({ y, x }: { y: number; x: number }) => ({
style: {
top: `${y}%`,
left: `${x}px`
}
}))`
position: absolute;
height: 4px;
@chunkydotdev
chunkydotdev / fishbubble.tsx
Created March 9, 2022 14:37
Fishbubble in typescript
import styled from 'styled-components'
const FishBubble = styled.div<{ x: number; y: number }>`
top: ${({ y }) => y}%;
left: ${({ x }) => x}px;
position: absolute;
height: 4px;
width: 4px;
background-color: white;
animation: up 1.5s linear forwards;
import React from 'react';
import styled from 'styled-components';
const Button = styled.button`
border: 1px solid black;
background-color: white;
padding: 10px;
color: black;
transition: 0.2s all;
pointer: cursor;
### Keybase proof
I hereby claim:
* I am storken on github.
* I am magnusjunghard (https://keybase.io/magnusjunghard) on keybase.
* I have a public key ASCRm5Q8mW8g3VeyPfvnjDKa_GcXA0KzVuuhAb21K2thVAo
To claim this, I am signing this object: