-
Notifications
You must be signed in to change notification settings - Fork 89
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
- Loading branch information
1 parent
70ae239
commit ce07e4c
Showing
107 changed files
with
33,971 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,27 @@ | ||
{ | ||
"extends": [ | ||
"plugin:@nrwl/nx/react", | ||
"next", | ||
"next/core-web-vitals", | ||
"../../.eslintrc.json" | ||
], | ||
"ignorePatterns": [".obsidian/**/*", ".next/**/*", "out/**/*"], | ||
"overrides": [ | ||
{ | ||
"files": ["*.ts", "*.tsx", "*.js", "*.jsx"], | ||
"rules": { | ||
"@next/next/no-html-link-for-pages": [ | ||
"error", | ||
"packages/template/pages" | ||
], | ||
"react/no-unescaped-entities": "warn" | ||
} | ||
} | ||
], | ||
"rules": { | ||
"@next/next/no-html-link-for-pages": "off" | ||
}, | ||
"env": { | ||
"jest": true | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,5 @@ | ||
# Flowershow default template | ||
|
||
Flowershow default app template. Uses Next.js with Tailwind and MDX. | ||
|
||
To learn more how to create and customize your Flowershow website check our docs at https://flowershow.app/docs |
15 changes: 15 additions & 0 deletions
15
examples/fonts-and-colors/.flowershow/components/BaseLink.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import Link from "next/link"; | ||
import { forwardRef } from "react"; | ||
|
||
const BaseLink = forwardRef((props, ref) => { | ||
const { href, children, ...rest } = props; | ||
return ( | ||
<Link href={href} ref={ref} {...rest}> | ||
{children} | ||
</Link> | ||
); | ||
}); | ||
|
||
BaseLink.displayName = "BaseLink"; | ||
|
||
export { BaseLink }; |
31 changes: 31 additions & 0 deletions
31
examples/fonts-and-colors/.flowershow/components/BlogItem.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import { Card } from "@/components/Card"; | ||
import { formatDate } from "@/lib/formatDate"; | ||
|
||
export function BlogItem({ blog }) { | ||
return ( | ||
<article className="md:grid md:grid-cols-4 md:items-baseline"> | ||
<Card className="md:col-span-3"> | ||
<Card.Title href={`${blog.url_path}`}>{blog.title}</Card.Title> | ||
<Card.Eyebrow | ||
as="time" | ||
dateTime={blog.created} | ||
className="md:hidden" | ||
decorate | ||
> | ||
{formatDate(blog.created)} | ||
</Card.Eyebrow> | ||
{blog.description && ( | ||
<Card.Description>{blog.description}</Card.Description> | ||
)} | ||
<Card.Cta>Read article</Card.Cta> | ||
</Card> | ||
<Card.Eyebrow | ||
as="time" | ||
dateTime={blog.created} | ||
className="mt-1 hidden md:block" | ||
> | ||
{formatDate(blog.created)} | ||
</Card.Eyebrow> | ||
</article> | ||
); | ||
} |
35 changes: 35 additions & 0 deletions
35
examples/fonts-and-colors/.flowershow/components/BlogsList.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
import { BlogItem } from "@/components/BlogItem.jsx"; | ||
import { useState } from "react"; | ||
|
||
const BLOGS_LOAD_COUNT = 10; | ||
|
||
export function BlogsList({ blogs }) { | ||
const [blogsCount, setBlogsCount] = useState(BLOGS_LOAD_COUNT); | ||
|
||
const handleLoadMore = () => { | ||
setBlogsCount((prevCount) => prevCount + BLOGS_LOAD_COUNT); | ||
}; | ||
|
||
return ( | ||
<> | ||
<div className="md:border-l md:border-zinc-100 md:pl-6 md:dark:border-zinc-700/40"> | ||
<div className="flex flex-col space-y-16"> | ||
{blogs.slice(0, blogsCount).map((blog) => { | ||
return <BlogItem key={blog.url_path} blog={blog} />; | ||
})} | ||
</div> | ||
</div> | ||
{blogs.length > blogsCount && ( | ||
<div className="text-center pt-20"> | ||
<button | ||
onClick={handleLoadMore} | ||
type="button" | ||
className="inline-flex items-center rounded border border-gray-300 px-2.5 py-1.5 text-xs font-medium text-gray-200 shadow-sm hover:bg-gray-50/10 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" | ||
> | ||
Show more | ||
</button> | ||
</div> | ||
)} | ||
</> | ||
); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,86 @@ | ||
// import Link from 'next/link' | ||
import clsx from "clsx"; | ||
import { ChevronRightIcon } from "@/components/ChevronRightIcon.jsx"; | ||
|
||
export function Card({ as: Component = "div", className, children }) { | ||
return ( | ||
<Component | ||
className={clsx(className, "group relative flex flex-col items-start")} | ||
> | ||
{children} | ||
</Component> | ||
); | ||
} | ||
|
||
Card.Link = function CardLink({ children, ...props }) { | ||
// <Link {...props}> | ||
// <span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" /> | ||
// <span className="relative z-10">{children}</span> | ||
// </Link> | ||
return ( | ||
<> | ||
<div className="absolute -inset-y-6 -inset-x-4 z-0 scale-95 bg-zinc-50 opacity-0 transition group-hover:scale-100 group-hover:opacity-100 dark:bg-slate-800/75 sm:-inset-x-6 sm:rounded-2xl" /> | ||
<a {...props}> | ||
<span className="absolute -inset-y-6 -inset-x-4 z-20 sm:-inset-x-6 sm:rounded-2xl" /> | ||
<span className="relative z-10">{children}</span> | ||
</a> | ||
</> | ||
); | ||
}; | ||
|
||
Card.Title = function CardTitle({ as: Component = "h2", href, children }) { | ||
return ( | ||
<Component className="text-base font-semibold tracking-tight text-zinc-800 dark:text-zinc-100"> | ||
{href ? <Card.Link href={href}>{children}</Card.Link> : children} | ||
</Component> | ||
); | ||
}; | ||
|
||
Card.Description = function CardDescription({ children }) { | ||
return ( | ||
<p className="relative z-10 mt-2 text-sm text-zinc-600 dark:text-zinc-400"> | ||
{children} | ||
</p> | ||
); | ||
}; | ||
|
||
Card.Cta = function CardCta({ children }) { | ||
return ( | ||
<div | ||
aria-hidden="true" | ||
className="relative z-10 mt-4 flex items-center text-sm font-medium text-teal-500" | ||
> | ||
{children} | ||
<ChevronRightIcon className="ml-1 h-4 w-4 stroke-current" /> | ||
</div> | ||
); | ||
}; | ||
|
||
Card.Eyebrow = function CardEyebrow({ | ||
as: Component = "p", | ||
decorate = false, | ||
className, | ||
children, | ||
...props | ||
}) { | ||
return ( | ||
<Component | ||
className={clsx( | ||
className, | ||
"relative z-10 order-first mb-3 flex items-center text-sm text-zinc-400 dark:text-zinc-500", | ||
decorate && "pl-3.5" | ||
)} | ||
{...props} | ||
> | ||
{decorate && ( | ||
<span | ||
className="absolute inset-y-0 left-0 flex items-center" | ||
aria-hidden="true" | ||
> | ||
<span className="h-4 w-0.5 rounded-full bg-zinc-200 dark:bg-zinc-500" /> | ||
</span> | ||
)} | ||
{children} | ||
</Component> | ||
); | ||
}; |
12 changes: 12 additions & 0 deletions
12
examples/fonts-and-colors/.flowershow/components/ChevronRightIcon.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
export function ChevronRightIcon(props) { | ||
return ( | ||
<svg viewBox="0 0 16 16" fill="none" aria-hidden="true" {...props}> | ||
<path | ||
d="M6.75 5.75 9.25 8l-2.5 2.25" | ||
strokeWidth="1.5" | ||
strokeLinecap="round" | ||
strokeLinejoin="round" | ||
/> | ||
</svg> | ||
); | ||
} |
42 changes: 42 additions & 0 deletions
42
examples/fonts-and-colors/.flowershow/components/Container.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,42 @@ | ||
import { forwardRef } from "react"; | ||
import clsx from "clsx"; | ||
|
||
const OuterContainer = forwardRef(function OuterContainer( | ||
{ className, children, ...props }, | ||
ref | ||
) { | ||
return ( | ||
<div ref={ref} className={clsx("sm:px-8", className)} {...props}> | ||
<div className="mx-auto max-w-5xl lg:px-8">{children}</div> | ||
</div> | ||
); | ||
}); | ||
|
||
const InnerContainer = forwardRef(function InnerContainer( | ||
{ className, children, ...props }, | ||
ref | ||
) { | ||
return ( | ||
<div | ||
ref={ref} | ||
className={clsx("relative px-4 sm:px-8 lg:px-12", className)} | ||
{...props} | ||
> | ||
<div className="mx-auto max-w-2xl lg:max-w-5xl">{children}</div> | ||
</div> | ||
); | ||
}); | ||
|
||
export const Container = forwardRef(function Container( | ||
{ children, ...props }, | ||
ref | ||
) { | ||
return ( | ||
<OuterContainer ref={ref} {...props}> | ||
<InnerContainer>{children}</InnerContainer> | ||
</OuterContainer> | ||
); | ||
}); | ||
|
||
Container.Outer = OuterContainer; | ||
Container.Inner = InnerContainer; |
Oops, something went wrong.