Skip to content

Commit fde620f

Browse files
halvaradophalvaradop
committed
styles(css): implement CSS Counters 
1 parent 33d4741 commit fde620f

16 files changed

Lines changed: 107 additions & 91 deletions

File tree

‎app/src/app/community/page.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ const CommunityPage = () => {
88
<HeroSection />
99
<CommunitySection />
1010
<CallToAction
11-
index={2}
1211
separator="Start Contributing"
1312
title="Join Our Community"
1413
description="Become a part of our growing community and connect with like-minded individuals."

‎app/src/app/docs/animations/page.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { CallToAction } from "@/ui/call-to-action"
1515
</TextEffect>
1616
</SectionLayout>
1717

18-
<Separator index={1}>Installation</Separator>
18+
<Separator>Installation</Separator>
1919
<SectionLayout>
2020

2121
## Installation
@@ -32,7 +32,7 @@ pnpm add -D @halvaradop/tailwindcss-animations
3232

3333
</SectionLayout>
3434

35-
<Separator index={2}>Configuration</Separator>
35+
<Separator>Configuration</Separator>
3636
<SectionLayout>
3737

3838
## Configuration
@@ -53,7 +53,7 @@ This setup ensures that the utility classes are available throughout your projec
5353

5454
</SectionLayout>
5555

56-
<Separator index={3}>Usage</Separator>
56+
<Separator>Usage</Separator>
5757
<SectionLayout>
5858

5959
## Usage
@@ -77,7 +77,7 @@ This utility package offers a variety of class enhancements, such as:
7777

7878
</SectionLayout>
7979

80-
<Separator index={4}>Customization</Separator>
80+
<Separator>Customization</Separator>
8181
<SectionLayout>
8282
### Custom Values
8383
Extend animation utilities using the `@theme` directive in your CSS:
@@ -94,7 +94,7 @@ This utility package offers a variety of class enhancements, such as:
9494
Use these variables to extend and customize your animation utilities.
9595
</SectionLayout>
9696

97-
<Separator index={5}>Key Features</Separator>
97+
<Separator>Key Features</Separator>
9898
<SectionLayout>
9999

100100
## Key Features
@@ -105,7 +105,7 @@ This utility package offers a variety of class enhancements, such as:
105105

106106
</SectionLayout>
107107

108-
<Separator index={6}>Breaking Changes</Separator>
108+
<Separator>Breaking Changes</Separator>
109109
<SectionLayout>
110110

111111
## Breaking Changes
@@ -118,7 +118,6 @@ As of the latest release:
118118
</SectionLayout>
119119

120120
<CallToAction
121-
index={7}
122121
separator="Contribute"
123122
title="Get Involved"
124123
description="Have questions or ideas? Visit our community to connect, share, or contribute."

‎app/src/app/docs/page.mdx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { CallToAction } from "@/ui/call-to-action"
1515
</TextEffect>
1616
</SectionLayout>
1717

18-
<Separator index={1}>Getting Started</Separator>
18+
<Separator>Getting Started</Separator>
1919
<SectionLayout>
2020

2121
## Getting Started
@@ -32,7 +32,7 @@ Dive into the docs below and start building with confidence.
3232

3333
</SectionLayout>
3434

35-
<Separator index={2}>Packages</Separator>
35+
<Separator>Packages</Separator>
3636

3737
<SectionLayout>
3838
## Packages
@@ -52,7 +52,7 @@ Stay tuned for more packages and continuous updates as the toolkit evolves!
5252

5353
</SectionLayout>
5454

55-
<Separator index={3}>Guides & Best Practices</Separator>
55+
<Separator>Guides & Best Practices</Separator>
5656
<SectionLayout>
5757
## Guides & Best Practices
5858

@@ -80,7 +80,6 @@ Enjoy full compatibility with v4, future-proof patterns, and a modern developer
8080
</SectionLayout>
8181

8282
<CallToAction
83-
index={4}
8483
separator="Contribute"
8584
title="Get Involved"
8685
description="Have questions or ideas? Visit our community to connect, share, or contribute."

‎app/src/app/docs/utilities/page.mdx‎

Lines changed: 6 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import { CallToAction } from "@/ui/call-to-action"
1515
</TextEffect>
1616
</SectionLayout>
1717

18-
<Separator index={1}>Installation</Separator>
18+
<Separator>Installation</Separator>
1919
<SectionLayout>
2020

2121
## Installation
@@ -32,7 +32,7 @@ pnpm add -D @halvaradop/tailwindcss-utilities
3232

3333
</SectionLayout>
3434

35-
<Separator index={2}>Configuration</Separator>
35+
<Separator>Configuration</Separator>
3636
<SectionLayout>
3737

3838
## Configuration
@@ -53,7 +53,7 @@ This setup ensures that the utility classes are available throughout your projec
5353

5454
</SectionLayout>
5555

56-
<Separator index={3}>Usage</Separator>
56+
<Separator>Usage</Separator>
5757
<SectionLayout>
5858

5959
## Usage
@@ -76,7 +76,7 @@ This utility package offers a variety of class enhancements, such as:
7676

7777
</SectionLayout>
7878

79-
<Separator index={4}>Customization</Separator>
79+
<Separator>Customization</Separator>
8080
<SectionLayout>
8181

8282
### Adding Custom Values
@@ -98,7 +98,7 @@ Future versions will extend this customization to additional utilities.
9898

9999
</SectionLayout>
100100

101-
<Separator index={5}>Key Features</Separator>
101+
<Separator>Key Features</Separator>
102102
<SectionLayout>
103103

104104
## Key Features
@@ -110,7 +110,7 @@ Future versions will extend this customization to additional utilities.
110110

111111
</SectionLayout>
112112

113-
<Separator index={6}>Breaking Changes</Separator>
113+
<Separator>Breaking Changes</Separator>
114114
<SectionLayout>
115115

116116
## Breaking Changes
@@ -123,7 +123,6 @@ As of the latest release:
123123
</SectionLayout>
124124

125125
<CallToAction
126-
index={7}
127126
separator="Contribute"
128127
title="Get Involved"
129128
description="Have questions or ideas? Visit our community to connect, share, or contribute."

‎app/src/app/layout.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,7 @@ export const metadata: Metadata = {
4040
}
4141

4242
export default function RootLayout({ children }: LayoutProps) {
43+
console.log("Rendering RootLayout")
4344
return (
4445
<html lang="en">
4546
<body

‎app/src/lib/@types/props.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ export interface TitleProps extends ImageSetProps {
2424
}
2525

2626
export interface SeparatorProps extends PropsWithChildren {
27-
index: number
27+
index?: number
2828
rotate?: boolean
2929
}
3030

@@ -84,7 +84,6 @@ export interface CallToActionProps {
8484
description: string
8585
button: string
8686
href: string
87-
index: number
8887
separator: string
8988
}
9089

‎app/src/lib/@types/types.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,9 @@ export type ArgsFunction = (...args: any) => void
33
export type PresetType = "blur" | "fade-in-blur" | "scale" | "fade" | "slide"
44

55
export type PerType = "word" | "char" | "line"
6+
7+
export interface SeparatorContext {
8+
index: number
9+
increment: () => void
10+
reset: () => void
11+
}

‎app/src/ui/call-to-action.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,10 @@ import { Button } from "@halvaradop/ui-button"
33
import { Separator } from "@/ui/separator"
44
import type { CallToActionProps } from "@/lib/@types/props"
55

6-
export const CallToAction = ({ index, separator, title, description, button, href }: CallToActionProps) => {
6+
export const CallToAction = ({ separator, title, description, button, href }: CallToActionProps) => {
77
return (
88
<section>
9-
<Separator index={index}>{separator}</Separator>
9+
<Separator>{separator}</Separator>
1010
<div
1111
className="min-h-[50dvh] mx-10 py-16 px-4 flex items-center justify-center flex-col text-center border-x border-solid border-border sm:px-6 md:px-8 base:mx-16 base:px-10"
1212
data-id="call-to-action"

‎app/src/ui/community/community-cards.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ export const CommunitySection = () => {
1111
const [hovered, setHovered] = useState<number | null>(null)
1212
return (
1313
<section>
14-
<Separator index={1}>Get Involved</Separator>
14+
<Separator>Get Involved</Separator>
1515
<section className="mx-10 border-x border-solid border-border base:mx-16 lg:min-h-[calc(100dvh-4rem)] lg:flex lg:flex-col">
1616
<SegmentAnimation
1717
title="Ways to Contribute"

‎app/src/ui/footer.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import tailwindLogo from "@/assets/tailwind.svg"
88
export const Footer = () => {
99
return (
1010
<footer>
11-
<Separator index={5}>Stay connected</Separator>
11+
<Separator>Stay connected</Separator>
1212
<section className="mx-10 text-primary border-x border-solid border-border base:grid md:grid-cols-2 base:mx-16">
1313
<h2 className="py-16 px-4 text-fluid-xl text-center border-b border-solid border-border sm:px-6 md:px-8 base:px-10 base:col-span-2 hover:bg-surface">
1414
@halvaradop/tailwindcss
@@ -59,7 +59,7 @@ export const Footer = () => {
5959
</figure>
6060
</div>
6161
</section>
62-
<Separator index={6} rotate>
62+
<Separator rotate>
6363
<span className="mx-auto">&#169; 2025 halvaradop.</span>
6464
</Separator>
6565
</footer>

0 commit comments

Comments
 (0)