set up examples
This commit is contained in:
parent
df23b62962
commit
824eef95f6
|
|
@ -5,7 +5,7 @@ import { Button } from "@/lib/button"
|
|||
import { Input } from "@/lib/input"
|
||||
import { Select } from "@/lib/select"
|
||||
import { Grid } from "@/lib/grid"
|
||||
import { Break } from "@/lib/break"
|
||||
import { Divider } from "@/lib/divider"
|
||||
|
||||
export const Cards = () => {
|
||||
return (
|
||||
|
|
@ -93,15 +93,15 @@ CreateAccount = Card(
|
|||
<h5>Enter your email below to create your account</h5>
|
||||
<HStack h="evenly" gap="4">
|
||||
<Button variant="outline" class="grow">
|
||||
<Icon name="Github" />
|
||||
<Icon class="mr-1" name="Github" />
|
||||
Github
|
||||
</Button>
|
||||
<Button variant="outline" class="grow">
|
||||
<Icon name="Mail" />
|
||||
<Icon class="mr-1" name="Mail" />
|
||||
Google
|
||||
</Button>
|
||||
</HStack>
|
||||
<Break>OR CONTINUE WITH</Break>
|
||||
<Divider>OR CONTINUE WITH</Divider>
|
||||
<Input id="email" placeholder="m@example.com">
|
||||
Email
|
||||
</Input>
|
||||
|
|
@ -208,11 +208,11 @@ TeamCard = Card(
|
|||
</div>
|
||||
</HStack>
|
||||
<HStack h="between" gap="3" v="center">
|
||||
<Icon name="MapPin" size={16} />
|
||||
<Icon name="MapPin" size={6} />
|
||||
<p class="grow">Alexandria, VA</p>
|
||||
<IconLink name="Mail" size={16} />
|
||||
<IconLink name="Linkedin" size={16} />
|
||||
<IconLink name="Github" size={16} />
|
||||
<IconLink name="Mail" size={6} />
|
||||
<IconLink name="Linkedin" size={6} />
|
||||
<IconLink name="Github" size={6} />
|
||||
</HStack>
|
||||
</VStack>
|
||||
)
|
||||
|
|
@ -252,9 +252,9 @@ section_content =(('bell','Everything',"Email digest, mentions & all activity.")
|
|||
<Input value="http://example.com/link/to/document" class="grow" />
|
||||
<Button variant="outline">Copy link</Button>
|
||||
</HStack>
|
||||
<Break>
|
||||
<Icon name="Circle" size={16} class="stroke-gray-300" />
|
||||
</Break>
|
||||
<Divider>
|
||||
<Icon name="Circle" size="3" class="stroke-gray-300" />
|
||||
</Divider>
|
||||
<h4 class="font-bold">People with access</h4>
|
||||
{teamMembers.map((member) => (
|
||||
<HStack h="between" gap="3" class="w-full p-2 hover:bg-gray-50 rounded">
|
||||
|
|
@ -303,7 +303,7 @@ Notifications = Card(
|
|||
<h4>Choose what you want to be notified about.</h4>
|
||||
{sectionContent.map((item) => (
|
||||
<HStack gap="3" v="center">
|
||||
<Icon name={item.icon} size={16} />
|
||||
<Icon name={item.icon} size={8} />
|
||||
<div class="flex-1">
|
||||
<p class="text-sm">{item.title}</p>
|
||||
<p class="text-sm text-gray-400">{item.description}</p>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,24 @@
|
|||
@import "tailwindcss";
|
||||
|
||||
@utility spacing {
|
||||
.w-*: width: *;
|
||||
.h-*: height: *;
|
||||
.p-*: padding: *;
|
||||
.pt-*: padding-top: *;
|
||||
.pb-*: padding-bottom: *;
|
||||
.pl-*: padding-left: *;
|
||||
.pr-*: padding-right: *;
|
||||
.px-*: padding-left: *; padding-right: *;
|
||||
.py-*: padding-top: *; padding-bottom: *;
|
||||
.m-*: margin: *;
|
||||
.mt-*: margin-top: *;
|
||||
.mb-*: margin-bottom: *;
|
||||
.ml-*: margin-left: *;
|
||||
.mr-*: margin-right: *;
|
||||
.mx-*: margin-left: *; margin-right: *;
|
||||
.my-*: margin-top: *; margin-bottom: *;
|
||||
}
|
||||
|
||||
@theme {
|
||||
--color-background: #ffffff;
|
||||
--color-foreground: #09090b;
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import "hono/jsx"
|
||||
import { FC, PropsWithChildren } from "hono/jsx"
|
||||
|
||||
type BreakProps = PropsWithChildren & {
|
||||
type DividerProps = PropsWithChildren & {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const Break: FC<BreakProps> = ({ children, class: className }) => {
|
||||
export const Divider: FC<DividerProps> = ({ children, class: className }) => {
|
||||
return (
|
||||
<div class={`flex items-center my-4 ${className || ""}`}>
|
||||
<div class="flex-1 border-t border-gray-300"></div>
|
||||
|
|
@ -22,18 +22,18 @@ export const Break: FC<BreakProps> = ({ children, class: className }) => {
|
|||
export const Test = () => {
|
||||
return (
|
||||
<div class="p-4 space-y-8 max-w-md">
|
||||
<h2 class="text-lg font-bold mb-4">Break Examples</h2>
|
||||
<h2 class="text-lg font-bold mb-4">Divider Examples</h2>
|
||||
|
||||
<div>
|
||||
<p>Would you like to continue</p>
|
||||
<Break>OR WOULD YOU LIKE TO</Break>
|
||||
<Divider>OR WOULD YOU LIKE TO</Divider>
|
||||
<p>Submit to certain dealth</p>
|
||||
</div>
|
||||
|
||||
{/* Just a line */}
|
||||
<div>
|
||||
<p>Look a line 👇</p>
|
||||
<Break />
|
||||
<Divider />
|
||||
<p>So cool, so straight!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -1,3 +1,4 @@
|
|||
import { TailwindSize } from "@/types"
|
||||
import "hono/jsx"
|
||||
import { FC } from "hono/jsx"
|
||||
import * as icons from "lucide-static"
|
||||
|
|
@ -6,7 +7,7 @@ export type IconName = keyof typeof icons
|
|||
|
||||
type IconProps = {
|
||||
name: IconName
|
||||
size?: number | string
|
||||
size?: TailwindSize
|
||||
class?: string
|
||||
}
|
||||
|
||||
|
|
@ -16,7 +17,7 @@ type IconLinkProps = IconProps & {
|
|||
}
|
||||
|
||||
export const Icon: FC<IconProps> = (props) => {
|
||||
const { name, size = 24, class: className } = props
|
||||
const { name, size = 6, class: className } = props
|
||||
|
||||
const iconSvg = icons[name]
|
||||
|
||||
|
|
@ -24,17 +25,16 @@ export const Icon: FC<IconProps> = (props) => {
|
|||
throw new Error(`Icon "${name}" not found in Lucide icons`)
|
||||
}
|
||||
|
||||
// Convert size to Tailwind classes if provided
|
||||
const sizeClass = size ? getSizeClass(size) : ""
|
||||
const allClasses = [sizeClass, className].filter(Boolean).join(" ")
|
||||
|
||||
// Modify the SVG string to include our custom attributes
|
||||
const modifiedSvg = iconSvg
|
||||
.replace(/width="[^"]*"/, `width="${size}"`)
|
||||
.replace(/height="[^"]*"/, `height="${size}"`)
|
||||
.replace(/class="[^"]*"/, className ? `class="${className}"` : "")
|
||||
.replace(
|
||||
/<svg([^>]*)>/,
|
||||
`<svg$1 style="display: block; flex-shrink: 0;"${
|
||||
className && !iconSvg.includes("class=") ? ` class="${className}"` : ""
|
||||
}>`
|
||||
)
|
||||
.replace(/width="[^"]*"/, "")
|
||||
.replace(/height="[^"]*"/, "")
|
||||
.replace(/class="[^"]*"/, "")
|
||||
.replace(/<svg([^>]*)>/, `<svg$1 style="display: block; flex-shrink: 0;" class="${allClasses}">`)
|
||||
|
||||
return <div dangerouslySetInnerHTML={{ __html: modifiedSvg }} />
|
||||
}
|
||||
|
|
@ -76,23 +76,23 @@ export const Test = () => {
|
|||
<h2 class="text-xl font-bold mb-4">Styling with CSS Classes</h2>
|
||||
<div class="grid grid-cols-5 gap-6">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Star" size={24} />
|
||||
<Icon name="Star" size={12} />
|
||||
<p class="text-sm">Default</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Star" size={24} class="text-blue-500" />
|
||||
<Icon name="Star" size={12} class="text-blue-500" />
|
||||
<p class="text-sm">Blue Color</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Star" size={24} class="stroke-1" />
|
||||
<Icon name="Star" size={12} class="stroke-1" />
|
||||
<p class="text-sm">Thin Stroke</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Star" size={24} class="text-yellow-400 stroke-0 fill-current" />
|
||||
<Icon name="Star" size={12} class="text-yellow-400 stroke-0 fill-current" />
|
||||
<p class="text-sm">Filled</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Star" size={24} class="text-purple-500 hover:text-purple-700 transition-colors" />
|
||||
<Icon name="Star" size={12} class="text-purple-500 hover:text-purple-700 transition-colors" />
|
||||
<p class="text-sm">Hover Effect</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -103,19 +103,19 @@ export const Test = () => {
|
|||
<h2 class="text-xl font-bold mb-4">Advanced Styling</h2>
|
||||
<div class="grid grid-cols-4 gap-6">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Heart" size={24} class="text-red-500 stroke-0 fill-current" />
|
||||
<Icon name="Heart" size={12} class="text-red-500 stroke-0 fill-current" />
|
||||
<p class="text-sm">Filled Heart</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Shield" size={24} class="text-green-600 stroke-2" />
|
||||
<Icon name="Shield" size={12} class="text-green-600 stroke-2" />
|
||||
<p class="text-sm">Thick Stroke</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Sun" size={24} class="text-yellow-500 animate-spin" />
|
||||
<Icon name="Sun" size={12} class="text-yellow-500 animate-spin" />
|
||||
<p class="text-sm">Animated</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<Icon name="Zap" size={24} class="text-blue-400 drop-shadow-lg" />
|
||||
<Icon name="Zap" size={12} class="text-blue-400 drop-shadow-lg" />
|
||||
<p class="text-sm">Drop Shadow</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -128,19 +128,19 @@ export const Test = () => {
|
|||
<h2 class="text-xl font-bold mb-4">Icon Links</h2>
|
||||
<div class="flex gap-6">
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink name="Home" size={32} href="/" />
|
||||
<IconLink name="Home" size={8} href="/" />
|
||||
<p class="text-sm">Home Link</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink name="ExternalLink" size={32} href="https://example.com" target="_blank" />
|
||||
<IconLink name="ExternalLink" size={8} href="https://example.com" target="_blank" />
|
||||
<p class="text-sm">External Link</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink name="Mail" size={32} href="mailto:hello@example.com" />
|
||||
<IconLink name="Mail" size={8} href="mailto:hello@example.com" />
|
||||
<p class="text-sm">Email Link</p>
|
||||
</div>
|
||||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink name="Phone" size={32} href="tel:+1234567890" />
|
||||
<IconLink name="Phone" size={8} href="tel:+1234567890" />
|
||||
<p class="text-sm">Phone Link</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -153,7 +153,7 @@ export const Test = () => {
|
|||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink
|
||||
name="Download"
|
||||
size={32}
|
||||
size={8}
|
||||
href="#"
|
||||
class="bg-blue-500 text-white p-2 rounded-lg hover:bg-blue-600 transition-colors"
|
||||
/>
|
||||
|
|
@ -162,7 +162,7 @@ export const Test = () => {
|
|||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink
|
||||
name="Settings"
|
||||
size={32}
|
||||
size={8}
|
||||
href="#"
|
||||
class="border-2 border-gray-300 p-2 rounded-full hover:border-gray-500 hover:bg-gray-50 transition-all"
|
||||
/>
|
||||
|
|
@ -171,7 +171,7 @@ export const Test = () => {
|
|||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink
|
||||
name="Heart"
|
||||
size={32}
|
||||
size={8}
|
||||
href="#"
|
||||
class="text-red-500 hover:scale-125 transition-transform stroke-[3]"
|
||||
/>
|
||||
|
|
@ -180,7 +180,7 @@ export const Test = () => {
|
|||
<div class="flex flex-col items-center space-y-2">
|
||||
<IconLink
|
||||
name="Star"
|
||||
size={32}
|
||||
size={8}
|
||||
href="#"
|
||||
class="text-yellow-400 fill-current stroke-1 hover:rotate-12 transition-transform"
|
||||
/>
|
||||
|
|
@ -192,7 +192,10 @@ export const Test = () => {
|
|||
)
|
||||
}
|
||||
|
||||
const getIconContent = (svgString: string): string => {
|
||||
const match = svgString.match(/<svg[^>]*>(.*?)<\/svg>/s)
|
||||
return match ? match[1] : ""
|
||||
const getSizeClass = (size: TailwindSize): string => {
|
||||
return `size-${size}`
|
||||
}
|
||||
|
||||
const tailwindSafeWidthStrings = [ "w-0", "w-0.5", "w-1", "w-1.5", "w-2", "w-2.5", "w-3", "w-3.5", "w-4", "w-5", "w-6", "w-7", "w-8", "w-9", "w-10", "w-11", "w-12", "w-14", "w-16", "w-20", "w-24", "w-28", "w-32", "w-36", "w-40", "w-44", "w-48", "w-52", "w-56", "w-60", "w-64", "w-72", "w-80", "w-96" ] // prettier-ignore
|
||||
const tailwindSafeHeightStrings = [ "h-0", "h-0.5", "h-1", "h-1.5", "h-2", "h-2.5", "h-3", "h-3.5", "h-4", "h-5", "h-6", "h-7", "h-8", "h-9", "h-10", "h-11", "h-12", "h-14", "h-16", "h-20", "h-24", "h-28", "h-32", "h-36", "h-40", "h-44", "h-48", "h-52", "h-56", "h-60", "h-64", "h-72", "h-80", "h-96", ] // prettier-ignore
|
||||
const tailwindSafeSizeStrings = [ "size-0", "size-0.5", "size-1", "size-1.5", "size-2", "size-2.5", "size-3", "size-3.5", "size-4", "size-5", "size-6", "size-7", "size-8", "size-9", "size-10", "size-11", "size-12", "size-14", "size-16", "size-20", "size-24", "size-28", "size-32", "size-36", "size-40", "size-44", "size-48", "size-52", "size-56", "size-60", "size-64", "size-72", "size-80", "size-96", ] // prettier-ignore
|
||||
|
|
|
|||
|
|
@ -1,55 +0,0 @@
|
|||
import "hono/jsx"
|
||||
import { FC, PropsWithChildren } from "hono/jsx"
|
||||
|
||||
type BreakProps = PropsWithChildren & {
|
||||
class?: string
|
||||
}
|
||||
|
||||
export const Break: FC<BreakProps> = ({ children, class: className }) => {
|
||||
return (
|
||||
<div class={`flex items-center my-4 ${className || ""}`}>
|
||||
<div class="flex-1 border-t border-gray-300"></div>
|
||||
{children && (
|
||||
<>
|
||||
<span class="px-3 text-sm text-gray-500 bg-white">{children}</span>
|
||||
<div class="flex-1 border-t border-gray-300"></div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const Test = () => {
|
||||
return (
|
||||
<div class="p-4 space-y-8 max-w-md">
|
||||
<h2 class="text-lg font-bold mb-4">Break Examples</h2>
|
||||
|
||||
{/* With text */}
|
||||
<div>
|
||||
<p>Would you like to sign in?</p>
|
||||
<Break>OR DO YOU SUBMIT TO</Break>
|
||||
<p>Certain death</p>
|
||||
</div>
|
||||
|
||||
{/* Simple divider */}
|
||||
<div>
|
||||
<p>Payment methods</p>
|
||||
<Break />
|
||||
<p>Billing information</p>
|
||||
</div>
|
||||
|
||||
{/* Different text examples */}
|
||||
<div>
|
||||
<p>Existing user?</p>
|
||||
<Break>OR</Break>
|
||||
<p>Create new account</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<p>Personal info</p>
|
||||
<Break>STEP 2</Break>
|
||||
<p>Payment details</p>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1,25 +1,12 @@
|
|||
import { LoaderProps } from "@workshop/nano-remix"
|
||||
import "@/index.css"
|
||||
/*
|
||||
break
|
||||
button
|
||||
grid
|
||||
icon
|
||||
image
|
||||
input
|
||||
linebreak
|
||||
placeholder
|
||||
select
|
||||
stack
|
||||
*/
|
||||
import { Test as AvatarTest } from "@/lib/avatar"
|
||||
import { Test as BreakTest } from "@/lib/break"
|
||||
import { Test as DividerTest } from "@/lib/divider"
|
||||
import { Test as ButtonTest } from "@/lib/button"
|
||||
import { Test as GridTest } from "@/lib/grid"
|
||||
import { Test as IconTest } from "@/lib/icon"
|
||||
import { Test as ImageTest } from "@/lib/image"
|
||||
import { Test as InputTest } from "@/lib/input"
|
||||
import { Test as LinebreakTest } from "@/lib/linebreak"
|
||||
import { Test as PlaceholderTest } from "@/lib/placeholder"
|
||||
import { Test as SelectTest } from "@/lib/select"
|
||||
import { Test as StackTest } from "@/lib/stack"
|
||||
|
|
@ -39,8 +26,8 @@ export default function Test({ testName }: LoaderProps<typeof loader>) {
|
|||
|
||||
if (testName === "avatar") {
|
||||
component = <AvatarTest />
|
||||
} else if (testName === "break") {
|
||||
component = <BreakTest />
|
||||
} else if (testName === "divider") {
|
||||
component = <DividerTest />
|
||||
} else if (testName === "button") {
|
||||
component = <ButtonTest />
|
||||
} else if (testName === "grid") {
|
||||
|
|
@ -51,8 +38,6 @@ export default function Test({ testName }: LoaderProps<typeof loader>) {
|
|||
component = <ImageTest />
|
||||
} else if (testName === "input") {
|
||||
component = <InputTest />
|
||||
} else if (testName === "linebreak") {
|
||||
component = <LinebreakTest />
|
||||
} else if (testName === "placeholder") {
|
||||
component = <PlaceholderTest />
|
||||
} else if (testName === "select") {
|
||||
|
|
|
|||
|
|
@ -1,8 +1,12 @@
|
|||
type TailwindSizeNumber =
|
||||
| 0
|
||||
| 0.5
|
||||
| 1
|
||||
| 1.5
|
||||
| 2
|
||||
| 2.5
|
||||
| 3
|
||||
| 3.5
|
||||
| 4
|
||||
| 5
|
||||
| 6
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user