Skip to content

Instantly share code, notes, and snippets.

View xiongemi's full-sized avatar
🏠
Working from home

Emily Xiong xiongemi

🏠
Working from home
View GitHub Profile
@xiongemi
xiongemi / post-summary.tsx
Last active May 4, 2021 01:41
post summary for blog post with title and excerpt
import parse from 'html-react-parser';
import React from 'react';
export interface PostSummaryProps {
post: any;
}
export function PostSummary({ post }: PostSummaryProps) {
return (
<>
@xiongemi
xiongemi / post-summary.tsx
Last active May 4, 2021 01:56
Post Summary with material ui
import {
Card,
CardActionArea,
CardContent,
CardMedia,
styled,
Typography,
} from '@material-ui/core';
import parse from 'html-react-parser';
import React from 'react';
@xiongemi
xiongemi / blog-post-arhive.tsx
Last active April 28, 2021 06:35
blog post archive with material ui
import { Grid } from '@material-ui/core';
import { BlogPost, PostSummary } from '@nx-gatsby-blogs/ui';
import { graphql } from 'gatsby';
import React from 'react';
import {
BlogPostArchivePropsData,
transformBlogPostArchivePropsDataToBlogPosts,
} from './models/blog-post-archive-props-data';
@xiongemi
xiongemi / gatsby-node.js
Created April 28, 2021 06:49
gatsby node for pagination
const path = require(`path`);
const chunk = require(`lodash/chunk`);
const postsPerPage = 6;
/**
* This function queries Gatsby's GraphQL server and asks for
* All WordPress blog posts. If there are any GraphQL error it throws an error
* Otherwise it will return the posts 🙌
*
@xiongemi
xiongemi / blog-post-archive.tsx
Last active May 4, 2021 01:07
blog post archive with pagination
/**
* Display blog posts with pagination
*/
import { Box, Grid } from '@material-ui/core';
import { Pagination, PaginationItem } from '@material-ui/lab';
import { BlogPost, PostSummary } from '@nx-gatsby-blogs/ui';
import { graphql, Link } from 'gatsby';
import React from 'react';
import {
@xiongemi
xiongemi / zodiac-sign-list.tsx
Last active April 20, 2022 23:39
nx react native zodiac-sign-list.tsx with data passed in
import {
AdhZodiacSignItem,
AdhZodiacSignList,
} from '@aztro-daily-horoscope/models';
import React from 'react';
import { FlatList } from 'react-native';
import { ListItem } from '@rneui/base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
export function ZodiacSignList() {
@xiongemi
xiongemi / root-state.initial.ts
Last active October 9, 2021 04:03
aztro daily horoscope blog root store with horoscope
import { initialHoroscopeState } from '../horoscope/horoscope.slice';
import { RootState } from './root-state.interface';
export const initialRootState: RootState = {
horoscope: initialHoroscopeState
};
@xiongemi
xiongemi / zodiac-sign-list.tsx
Last active April 20, 2022 23:42
aztro daily horoscope horoscope-list with container and on press action
import {
AdhZodiacSignItem,
AdhZodiacSignList,
} from '@aztro-daily-horoscope/models';
import React from 'react';
import { FlatList } from 'react-native';
import { ListItem } from '@rneui/base';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';
import { connect } from 'react-redux';
@xiongemi
xiongemi / zodiac-sign-item.interface.ts
Created June 3, 2021 23:45
zodiac daily horoscope zodiac sign list const file
import { AdhZodiacSign } from './zodiac-sign.enum';
export interface AdhZodiacSignItem {
icon: string;
zodiacSign: AdhZodiacSign;
}
@xiongemi
xiongemi / horoscope-state.interface.ts
Last active June 4, 2021 05:30
aztro daily horoscope horoscpe state with only zodiac sign
import {
AdhZodiacSignItem,
} from '@aztro-daily-horoscope/models';
export interface HoroscopeState {
zodiacSignItem?: AdhZodiacSignItem;
}