yinkakun

Terms of Service

Last revised on [DATE]

The Gist

[COMPANY] operates the [SERVICE] service, which we hope you use. If you use it, please use it responsibly. If you don't, we'll have to terminate your account.

For paid accounts, you'll be charged on a monthly basis. You can cancel anytime, but there are no refunds.

yinkakun

import React from "react";
import type { Variants } from "framer-motion";
import { motion, AnimatePresence } from "framer-motion";

const slideVariants: Variants = {
  enter: {
    x: "60%",
    opacity: 0,
    scale: 0.85,
  },

yinkakun

import React from "react";

interface ProgressBarProps {
  progress: number;
}

const getColorClassName = (progress: number) => {
  if (progress < 20) return "bg-red-500";
  if (progress < 40) return "bg-orange-500";
  if (progress < 60) return "bg-yellow-500";

yinkakun

const systemPrompt = `You are an expert web developer who specializes in tailwind css.
A user will provide you with a low-fidelity wireframe of an application.
You will return a single html file that uses HTML, tailwind css, and JavaScript to create a high fidelity website.
Include any extra CSS and JavaScript in the html file.
If you have any images, load them from Unsplash or use solid colored rectangles.
The user will provide you with notes in blue or red text, arrows, or drawings.
The user may also include images of other websites as style references. Transfer the styles as best as you can, matching fonts / colors / layouts.
They may also provide you with the html of a previous design that they want you to iterate from.
Carry out any changes they request from you.
In the wireframe, the previous design's html will appear as a white rectangle.

yinkakun

import React from "react";
import { cn } from "lib/utils";
import { useCopyToClipboard } from "usehooks-ts";
import { Check, Copy, EyeOff } from "lucide-react";

export interface CopyToClipboardProps {
  value: string;
  secret?: boolean;
  className?: string;
}

yinkakun

import React from "react";

type Steps = "component-a" | "component-b" | "component-c";

const ComponentA = () => {
  return <div>Component B</div>;
};

const ComponentB = () => {
  return <div>Component B</div>;

yinkakun

<script lang="ts">
	import NavLink from '$lib/components/nav-link.svelte';
	import { User } from 'lucide-svelte';
</script>

<NavLink href="/settings">
	<User size="16" strokeWidth={2} />
	<span> Settings </span>
</NavLink>

yinkakun

type CreateQueryStringsOpts = {
  [key: string]: string;
};

export const createQueryStrings = (opts: CreateQueryStringsOpts) => {
  const params = new URLSearchParams();
  Object.keys(opts).forEach((key) => params.set(key, opts[key]));
  return params.toString();
};

yinkakun

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

yinkakun

import { ClassValue, clsx } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

type ButtonProps = React.ComponentProps<'button'>;

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(