](https://www.gatsbyjs.com/dashboard/deploynow?url=https://github.com/LekoArts/gatsby-starter-tmdb)
+
+Built with [vanilla-extract](https://github.com/seek-oss/vanilla-extract), [react-query](https://react-query.tanstack.com/).
+
+This example showcases a combination of build-time and client-only usage of the TMDb API. The `/` (homepage) page is built statically with `gatsby-source-tmdb`. The detailed pages (e.g. `/tv/
+
+ {name}
+ {` `}
+ {status &&
+ (status === `Returning Series` ? (
+
+
+
+
+ {name}
+ {` `}
+ {status &&
+ (status === `Returning Series` ? (
+
+
+
+
+
+ {rating}
+
+
+ {next && (
+ {format(parseISO(release), `yyyy`)}
+
+
+ )}
+ {episodes && (
+ {format(parseISO(next), `dd.MM.yy`)}
+
+
+ )}
+ {seasons && (
+ {episodes}
+
+
+ )}
+ {seasons}
+
+
+
+
+ )
+ }
+
+ if (status === `error`) {
+ // @ts-ignore
+ return Error: {error.message}
+ }
+
+ return (
+
+
+
+
+ {data.credits.cast.length > 0 && (
+ <>
+
+
+ )
+}
+
+export default DetailView
diff --git a/example/src/components/icon.css.ts b/example/src/components/icon.css.ts
new file mode 100644
index 0000000..f2b1769
--- /dev/null
+++ b/example/src/components/icon.css.ts
@@ -0,0 +1,46 @@
+import { mapToStyles } from "@vanilla-extract/css"
+import { themeVars } from "../styles.css"
+
+const defaultMedia = {
+ "screen and (max-width: 400px)": {
+ width: `0.9rem`,
+ height: `0.9rem`,
+ },
+}
+
+const defaultStyles = {
+ width: `1.25rem`,
+ height: `1.25rem`,
+ fill: themeVars.color.black,
+ "@media": defaultMedia,
+}
+
+export const iconStyles = mapToStyles({
+ next: defaultStyles,
+ first: defaultStyles,
+ star: defaultStyles,
+ running: {
+ width: `1.15rem`,
+ height: `1.15rem`,
+ fill: themeVars.color.primary,
+ "@media": defaultMedia,
+ },
+ ended: {
+ width: `1.15rem`,
+ height: `1.15rem`,
+ fill: themeVars.color.white,
+ "@media": defaultMedia,
+ },
+ episodes: {
+ width: `1rem`,
+ height: `1rem`,
+ fill: themeVars.color.white,
+ "@media": defaultMedia,
+ },
+ seasons: {
+ width: `1rem`,
+ height: `1rem`,
+ fill: themeVars.color.white,
+ "@media": defaultMedia,
+ },
+})
diff --git a/example/src/components/icon.tsx b/example/src/components/icon.tsx
new file mode 100644
index 0000000..82a4d6c
--- /dev/null
+++ b/example/src/components/icon.tsx
@@ -0,0 +1,67 @@
+import * as React from "react"
+import { iconStyles } from "./icon.css"
+
+export const Icon: React.FC<{
+ name: "next" | "first" | "star" | "running" | "ended" | "episodes" | "seasons"
+ hidden?: boolean
+ className?: string
+ style?: React.CSSProperties
+}> = ({ name, hidden = true, className, style }) => (
+
+)
+
+export const IconMother: React.FC = () => (
+
+)
diff --git a/example/src/components/layout.css.ts b/example/src/components/layout.css.ts
new file mode 100644
index 0000000..cfaf041
--- /dev/null
+++ b/example/src/components/layout.css.ts
@@ -0,0 +1,56 @@
+import { style, keyframes } from "@vanilla-extract/css"
+import { breakpoints, themeVars } from "../styles.css"
+
+const wave = keyframes({
+ "0%, 100%": {
+ transform: `rotate(0)`,
+ },
+ "20%, 60%": {
+ transform: `rotate(-25deg)`,
+ },
+ "40%, 80%": {
+ transform: `rotate(10deg)`,
+ },
+})
+
+export const githubCornerStyle = style({})
+
+export const githubCornerSvgStyle = style({
+ top: 0,
+ border: 0,
+ right: 0,
+ fill: themeVars.color.primary,
+ color: themeVars.color.white,
+ position: `absolute`,
+ selectors: {
+ [`${githubCornerStyle}:focus &`]: {
+ outline: `-webkit-focus-ring-color auto 1px`,
+ },
+ },
+})
+
+export const octoArmStyle = style({
+ selectors: {
+ [`${githubCornerStyle}:hover &`]: {
+ animation: `${wave} 560ms ease-in-out`,
+ },
+ },
+})
+
+export const footerStyle = style({
+ textAlign: `center`,
+ marginTop: `4rem`,
+ marginBottom: `2rem`,
+ color: themeVars.color.grey,
+})
+
+export const mainStyle = style({
+ maxWidth: `1200px`,
+ margin: `0 auto`,
+ padding: `3rem 1rem`,
+ "@media": {
+ [`screen and (min-width: ${breakpoints.sm})`]: {
+ padding: `4rem 2rem`,
+ },
+ },
+})
diff --git a/example/src/components/layout.tsx b/example/src/components/layout.tsx
new file mode 100644
index 0000000..1ccf7c7
--- /dev/null
+++ b/example/src/components/layout.tsx
@@ -0,0 +1,50 @@
+import * as React from "react"
+import { PageProps } from "gatsby"
+import SEO from "./seo"
+import Link from "./link"
+import { IconMother } from "./icon"
+import Back from "./back"
+import { githubCornerStyle, githubCornerSvgStyle, octoArmStyle, mainStyle, footerStyle } from "./layout.css"
+
+const Layout: React.FC<{ location?: PageProps["location"] }> = ({ children, location }) => {
+ const isHome = location?.pathname === `/`
+
+ return (
+ <>
+
+ 
+
+
+
+ + {data.title || data.name} ({format(parseISO(data.release_date || data.first_air_date), `yyyy`)}) +
+ {(data.title !== data.original_title || data.name !== data.original_name) && ( +Original: {data.original_title || data.original_name}
+ )}
+
+
+
+ {data.number_of_episodes && (
+
+ {data.runtime &&
+
+ )}
+ {data.number_of_seasons && (
+
+
+ )}
+ {data.next_episode_to_air && (
+
+
+ )}
+ Runtime: {data.runtime} Minutes
}
+ {data.episode_run_time && (
+
+ Total Runtime:{` `}
+ {calculateTime({
+ episodes: data.number_of_episodes,
+ runTime: data.episode_run_time,
+ })}
+
+ )}
+
+ {data.genres.map((genre) => (
+
+
+ {genre.name}
+
+ ))}
+
+
+ Overview
+{data.overview}
+Top Billed Cast
+
+ {data.credits.cast.slice(0, 10).map((member) => (
+
+
+ )}
+ {data.videos.results.length > 0 && (
+ <>
+
+
+ ))}
+
+ 
+
+
+ {member.name}
+ {member.character}
+
+ Trailer
+
+
+
+
+ )}
+ Similar {type === `tv` ? `Shows` : `Movies`}
+
+ {data.similar.results.slice(0, 10).map((item) => (
+
+ {item.name || item.title}
+
+ ))}
+
+
+
+)
+
+export default Legend
diff --git a/example/src/components/link.css.ts b/example/src/components/link.css.ts
new file mode 100644
index 0000000..01f1491
--- /dev/null
+++ b/example/src/components/link.css.ts
@@ -0,0 +1,16 @@
+import { style } from "@vanilla-extract/css"
+import { themeVars } from "../styles.css"
+
+export const linkStyle = style({
+ color: themeVars.color.primary,
+ transition: `all 0.5s ease-in-out`,
+ textDecoration: `none`,
+ ":hover": {
+ color: themeVars.color.primary,
+ textDecoration: `underline`,
+ },
+ ":focus": {
+ color: themeVars.color.primary,
+ textDecoration: `underline`,
+ },
+})
diff --git a/example/src/components/link.tsx b/example/src/components/link.tsx
new file mode 100644
index 0000000..7834d09
--- /dev/null
+++ b/example/src/components/link.tsx
@@ -0,0 +1,23 @@
+import * as React from "react"
+import { Link as GatsbyLink } from "gatsby"
+import { linkStyle } from "./link.css"
+
+const Link: React.FC<{ to: string }> = ({ to, children, ...rest }) => {
+ const internal = /^\/(?!\/)/.test(to)
+
+ if (internal) {
+ return (
+ Legend
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 404 - Not Found
++ You just hit a route that doesn't exist. You can go back to the homepage and try again. +
+Attribution
++ The Movie Database for providing all the data via its API. +
++ moviedb-promise for helping with the TS types and + some general concepts around effectively fetching the data. +
++ Star by laris icon from the Noun Project, Calendar by Thengakola from the Noun Project, movie ticket by Three Six + Five from the Noun Project. +
+{children}
+
+const Index: React.FC+ Series & Movies. {info.username} +
+ +{list.description}
+