Skip to content

Instantly share code, notes, and snippets.

View tammyhart's full-sized avatar

Tammy Hart tammyhart

View GitHub Profile
@tammyhart
tammyhart / Icon.js
Created July 20, 2017 04:15
SVG Icon React Component
import React from 'react';
class Icon extends React.Component {
render() {
const icons = {
menu: <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#000" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
<line x1="3" y1="12" x2="21" y2="12"/>
<line x1="3" y1="6" x2="21" y2="6"/>
<line x1="3" y1="18" x2="21" y2="18"/>
</svg>,
@tammyhart
tammyhart / Main.tsx
Last active August 23, 2024 03:53
Typed Component for <main>
import styled from "styled-components"
import type { Sizes } from "./styles"
import { mapGap, mapGrow, media, size } from "./utils"
const BIG = "big"
const NONE = "none"
const NORMAL = "normal"
const DEFAULT_SIZE = NORMAL
@tammyhart
tammyhart / Flex.tsx
Last active August 25, 2024 10:21
Flexible flex-box component
import { HTMLProps } from "react"
import styled from "styled-components"
import {
calcBasis,
mapGap,
mapJustify,
mapPadding,
media,
} from "./utils"
type ConditionalWrap<T> = {
children: React.ReactNode
condition: boolean
Wrap: T
wrapProps?: T extends React.ComponentType<infer P> ? P : object
}
const ConditionalWrap = <T extends React.ElementType>({
children,
condition,
@tammyhart
tammyhart / Separator.tsx
Created August 28, 2024 01:43
A non-SVG solution to drawing a responsive line from top right to bottom left with circular markers on each end + calculate a gradient to fade from point a to b
import styled from "styled-components"
import { media, size } from "./utils"
enum Z {
Separator,
FauxLine,
FauxLineBlocker,
Marker,
}
@tammyhart
tammyhart / page.tsx
Created September 5, 2024 20:43
Filter tokens in meta title
export async function generateMetadata({ searchParams }: ThoughtsProps): Promise<Metadata> {
const tagId = searchParams?.tag ?? null
const [tagData, indexData] = await Promise.all([
getStrapiData(`tags?${tagIdQuery(tagId)}`),
getStrapiData("thoughts-index?populate=*"),
])
let tagName = tagData?.data[0]?.name ?? null
tagName = tagName ? `on ${tagName}` : undefined
@tammyhart
tammyhart / App.css
Last active November 3, 2024 22:05
useStickyRef.js - Add class when stuck
/* essential styles for hook to work */
header {
/*
this is set in the JS so the the primary behavior isn't dependant on the stylesheet
position: sticky;
top: -1px;
*/
}
/* styles for when header is stuck */
@tammyhart
tammyhart / FilteredComponentAs.tsx
Last active November 3, 2024 22:10
FilteredComponentAs.tsx - Strapi and Styled-Components filter
import styled from "styled-components"
import type { KnownTarget } from "styled-components/dist/types"
import { type BlocksContent, BlocksRenderer } from "@strapi/blocks-react-renderer"
type FilterAs = {
filteredText: string
as?: KnownTarget
}
const filterAs = (text: string): FilterAs => {