Skip to content

Commit

Permalink
hover grid
Browse files Browse the repository at this point in the history
  • Loading branch information
@benorloff
benorloff committed Apr 20, 2024
1 parent aa6341a commit 3573879
Show file tree
Hide file tree
Showing 12 changed files with 533 additions and 97 deletions.
37 changes: 4 additions & 33 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,36 +1,7 @@
This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
## UI Component Library

## Getting Started
This is a component library built on top of shadcn/ui, which utilizes radix ui primitives and TailwindCSS. It includes all of the available components from shadcn/ui, as well as several ready-made "block" components that are extensible and composable.

First, run the development server:
This repository is intended to serve as a centralized source for components that I use across my projects and I will be adding new "blocks" over time as they are developed.

```bash
npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev
```

Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.

You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.

This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.

## Learn More

To learn more about Next.js, take a look at the following resources:

- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.

You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!

## Deploy on Vercel

The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
Storybook is used for component testing and documentation.
196 changes: 196 additions & 0 deletions app/blocks/hover-grid/page.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,196 @@
import { Grid, GridCell } from "@/components/grid";
import { HoverGrid, HoverGridCell, HoverGridContent, HoverGridDescription, HoverGridFooter, HoverGridHeader, HoverGridLeader, HoverGridTitle } from "@/components/hover-grid";
import { ArrowUpRight } from "lucide-react";
import { Code } from "bright";
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbSeparator } from "@/components/ui/breadcrumb";

const HoverGridCode =
`import {
HoverGrid,
HoverGridCell,
HoverGridContent,
HoverGridDescription,
HoverGridFooter,
HoverGridHeader,
HoverGridLeader,
HoverGridTitle
} from "@/components/hover-grid";

export const HoverGridDemo = () => {
return (
<HoverGrid>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
</HoverGrid>
)
}`

const HoverGridPage = () => {
return (
<div className="container">
<section className="w-full py-10">
<Breadcrumb>
<BreadcrumbList>
<BreadcrumbItem>
<BreadcrumbLink href="#">Docs</BreadcrumbLink>
</BreadcrumbItem>
<BreadcrumbSeparator />
<BreadcrumbItem>
<BreadcrumbLink href="#">Components</BreadcrumbLink>
</BreadcrumbItem>
</BreadcrumbList>
</Breadcrumb>
<h1 className="text-5xl font-semibold">HoverGrid</h1>
</section>
<section className="flex h-full w-full py-10 m-auto items-center justify-start">
<Tabs defaultValue="preview" className="w-full">
<TabsList>
<TabsTrigger value="preview">Preview</TabsTrigger>
<TabsTrigger value="code">Code</TabsTrigger>
</TabsList>
<TabsContent value="preview" className="w-full border rounded-md p-10">
<HoverGrid>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
<HoverGridCell>
<HoverGridHeader>
<HoverGridLeader>
Leader1
<ArrowUpRight
size={24}
className="opacity-0 group-hover:opacity-100 translate-y-4
group-hover:translate-y-0 transition-all ease-in-out duration-500"
/>
</HoverGridLeader>
</HoverGridHeader>
<HoverGridContent>
<HoverGridTitle>Lorem ipsum.</HoverGridTitle>
<HoverGridDescription>
Lorem ipsum dolor sit amet, consectetur adipiscing elit,
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam.
</HoverGridDescription>
</HoverGridContent>
<HoverGridFooter>Footer 1</HoverGridFooter>
</HoverGridCell>
</HoverGrid>
</TabsContent>
<TabsContent value="code">
<Code
lang="tsx"
title="HoverGrid.tsx"
lineNumbers
className="w-full border rounded-md"
>
{HoverGridCode}
</Code>
</TabsContent>
</Tabs>
</section>
</div>
)
}

export default HoverGridPage;
20 changes: 19 additions & 1 deletion app/layout.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "@/styles/globals.css";
import { cn } from "@/lib/utils";
import { ThemeProvider } from "@/components/providers/theme-provider";
import { SiteHeader } from "@/components/site-header";

const inter = Inter({ subsets: ["latin"] });

Expand All @@ -16,7 +19,22 @@ export default function RootLayout({
}>) {
return (
<html lang="en">
<body className={inter.className}>{children}</body>
<body
className={cn(
"min-h-screen bg-background",
inter.className
)}
>
<ThemeProvider
attribute="class"
defaultTheme="system"
enableSystem={true}
disableTransitionOnChange
>
<SiteHeader />
{children}
</ThemeProvider>
</body>
</html>
);
}
58 changes: 58 additions & 0 deletions components/grid.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
import * as React from "react";

import { cn } from "@/lib/utils";
import { cva } from "class-variance-authority";

const gridVariants = cva(
"grid divide-x divide-y w-full",
{
variants: {
columns: {
1: "grid-cols-1",
2: "grid-cols-2",
3: "grid-cols-3",
4: "grid-cols-4",
5: "grid-cols-5",
6: "grid-cols-6",
7: "grid-cols-7",
8: "grid-cols-8",
9: "grid-cols-9",
10: "grid-cols-10",
},
},
defaultVariants: {
columns: 3,
},
}
);

const Grid = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div className="relative w-full overflow-auto">
<div
ref={ref}
className={cn("grid grid-cols-3", className)}
{...props}
/>
</div>
));
Grid.displayName = "Grid";

const GridCell = React.forwardRef<
HTMLDivElement,
React.HTMLAttributes<HTMLDivElement>
>(({ className, ...props }, ref) => (
<div
ref={ref}
className={cn("flex flex-col gap-4", className)}
{...props}
/>
));
GridCell.displayName = "GridCell";

export {
Grid,
GridCell,
};
Loading

0 comments on commit 3573879

Please sign in to comment.