3 screenshots uploaded by Argos
| Name | Before | After |
|---|---|---|
| media-unavailable.png The share-link dead end, before and after: from a bare error card to a sign-in path, a signup CTA, and the three-step feature pitch. |
3 screenshots uploaded by Argos
| Name | Before | After |
|---|---|---|
| media-unavailable.png The share-link dead end, before and after: from a bare error card to a sign-in path, a signup CTA, and the three-step feature pitch. |
| import { useEffect, useMemo, useRef, useState } from "react"; | |
| import { useIsomorphicLayoutEffect } from "./useIsomorphicLayoutEffect"; | |
| import { usePrevious } from "./usePrevious"; | |
| import { useResizeObserver } from "./useResizeObserver"; | |
| export type UseElementOverflowProps<T> = { | |
| /** The array of elements to render */ | |
| items: Array<T>; | |
| }; |
| const program = require("commander"); | |
| const { withSpinner } = require("./util"); | |
| const newsIndexer = require("../server/services/news/indexer"); | |
| const imagesIndexer = require("../server/services/images/indexer"); | |
| const articlesIndexer = require("../server/services/articles/indexer"); | |
| const liveInputsIndexer = require("../server/services/live-inputs/indexer"); | |
| const snippetsIndexer = require("../server/services/snippets/indexer"); | |
| const postsIndexer = require("../server/services/posts/indexer"); |
| // Specification of the List component | |
| // This complete example describe the API of the component | |
| // It has to be implemented to work with this API | |
| function ListExample() { | |
| const list = useListState({ | |
| columns: { | |
| name: { | |
| props: { |
| // App.js | |
| import React, { useState, useEffect, useRef } from 'react' | |
| import { | |
| Normalize, | |
| Grid, | |
| Typography, | |
| Row, | |
| Col, | |
| Button, | |
| } from '@smooth-ui/core-sc' |
| import React from 'react' | |
| import styled, { Box, css, variant } from '@xstyled/styled-components' | |
| const variants = variant({ | |
| variants: { | |
| gold: css` | |
| background-color: gold; | |
| color: white; | |
| border-color: gold; | |
| `, |
| import React, { useContext } from 'react' | |
| import ReactDOM from 'react-dom/server' | |
| import ssrPrepass from 'react-ssr-prepass' | |
| const Context = React.createContext() | |
| const asyncFoo = async () => 'foo' | |
| function MyComponent() { | |
| const tracker = useContext(Context) |
| import React, { useState, useEffect } from 'react' | |
| import { createPortal } from 'react-dom' | |
| import styled from 'styled-components' | |
| const Backdrop = styled.div` | |
| position: absolute; | |
| background-color: rgba(0, 0, 0, 0.5); | |
| top: 0; | |
| right: 0; | |
| bottom: 0; |
| import { Box } from "@smooth-ui/core-sc"; | |
| <Box | |
| backgroundColor="primary" | |
| width={{ sm: 1, md: 0.5 }} | |
| height={100} | |
| mx="auto" | |
| p={2} | |
| /> |
| import styled from "styled-components"; | |
| import system from "@smooth-ui/system"; | |
| const MyBox = styled.div( | |
| system({ | |
| backgroundColor: 'primary', | |
| width: { sm: 1, md: 0.5 }, | |
| height: 100, | |
| mx: 'auto', | |
| p: 2, |