Skip to content

Commit ca0e300

Browse files
LeilaFariasLeilaFarias
authored
Merge pull request #56 from OCA-UFCG/refact/link-button
refact: buttons
2 parents 68fb9fa + 4483f0c commit ca0e300

13 files changed

Lines changed: 322 additions & 73 deletions

File tree

‎components.json‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
{
2+
"$schema": "https://ui.shadcn.com/schema.json",
3+
"style": "new-york",
4+
"rsc": true,
5+
"tsx": true,
6+
"tailwind": {
7+
"config": "",
8+
"css": "src/app/globals.css",
9+
"baseColor": "neutral",
10+
"cssVariables": true,
11+
"prefix": ""
12+
},
13+
"aliases": {
14+
"components": "@/components",
15+
"utils": "@/lib/utils",
16+
"ui": "@/components/ui",
17+
"lib": "@/lib",
18+
"hooks": "@/hooks"
19+
},
20+
"iconLibrary": "lucide"
21+
}

‎package-lock.json‎

Lines changed: 63 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@
2121
"@glidejs/glide": "^3.7.1",
2222
"@google/earthengine": "^0.1.402",
2323
"@next/third-parties": "^14.2.3",
24+
"@radix-ui/react-slot": "^1.2.0",
2425
"@types/google-earth": "^0.0.8",
2526
"@types/next": "^8.0.7",
2627
"braces": ">=3.0.3",
28+
"class-variance-authority": "^0.7.1",
2729
"contentful": "^10.11.10",
2830
"contentful-management": "^11.48.0",
2931
"express": "^4.19.2",
@@ -37,7 +39,8 @@
3739
"react-dom": "^18",
3840
"sass": "^1.77.8",
3941
"styled-components": "^6.1.8",
40-
"swiper": "^11.1.14"
42+
"swiper": "^11.1.14",
43+
"tailwind-merge": "^3.2.0"
4144
},
4245
"devDependencies": {
4346
"@eslint/js": "^9.1.1",

‎src/app/globals.css‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
@import "tailwindcss";
22

3+
@custom-variant dark (&:is(.dark *));
4+
35
@theme {
46
--color-green-neutro: #D6E9DB;
57
--color-green-100: #EEFFF3;
@@ -102,3 +104,119 @@
102104
--color-grey-1000: #3E3C3D;
103105
--color-grey-1100: #292829;
104106
}
107+
108+
@theme inline {
109+
--radius-sm: calc(var(--radius) - 4px);
110+
--radius-md: calc(var(--radius) - 2px);
111+
--radius-lg: var(--radius);
112+
--radius-xl: calc(var(--radius) + 4px);
113+
--color-background: var(--background);
114+
--color-foreground: var(--foreground);
115+
--color-card: var(--card);
116+
--color-card-foreground: var(--card-foreground);
117+
--color-popover: var(--popover);
118+
--color-popover-foreground: var(--popover-foreground);
119+
--color-primary: var(--primary);
120+
--color-primary-foreground: var(--primary-foreground);
121+
--color-secondary: var(--secondary);
122+
--color-secondary-foreground: var(--secondary-foreground);
123+
--color-muted: var(--muted);
124+
--color-muted-foreground: var(--muted-foreground);
125+
--color-accent: var(--accent);
126+
--color-accent-foreground: var(--accent-foreground);
127+
--color-destructive: var(--destructive);
128+
--color-border: var(--border);
129+
--color-input: var(--input);
130+
--color-ring: var(--ring);
131+
--color-chart-1: var(--chart-1);
132+
--color-chart-2: var(--chart-2);
133+
--color-chart-3: var(--chart-3);
134+
--color-chart-4: var(--chart-4);
135+
--color-chart-5: var(--chart-5);
136+
--color-sidebar: var(--sidebar);
137+
--color-sidebar-foreground: var(--sidebar-foreground);
138+
--color-sidebar-primary: var(--sidebar-primary);
139+
--color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
140+
--color-sidebar-accent: var(--sidebar-accent);
141+
--color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
142+
--color-sidebar-border: var(--sidebar-border);
143+
--color-sidebar-ring: var(--sidebar-ring);
144+
}
145+
146+
:root {
147+
--radius: 0.625rem;
148+
--background: oklch(1 0 0);
149+
--foreground: oklch(0.145 0 0);
150+
--card: oklch(1 0 0);
151+
--card-foreground: oklch(0.145 0 0);
152+
--popover: oklch(1 0 0);
153+
--popover-foreground: oklch(0.145 0 0);
154+
--primary: oklch(0.205 0 0);
155+
--primary-foreground: oklch(0.985 0 0);
156+
--secondary: oklch(0.97 0 0);
157+
--secondary-foreground: oklch(0.205 0 0);
158+
--muted: oklch(0.97 0 0);
159+
--muted-foreground: oklch(0.556 0 0);
160+
--accent: oklch(0.97 0 0);
161+
--accent-foreground: oklch(0.205 0 0);
162+
--destructive: oklch(0.577 0.245 27.325);
163+
--border: oklch(0.922 0 0);
164+
--input: oklch(0.922 0 0);
165+
--ring: oklch(0.708 0 0);
166+
--chart-1: oklch(0.646 0.222 41.116);
167+
--chart-2: oklch(0.6 0.118 184.704);
168+
--chart-3: oklch(0.398 0.07 227.392);
169+
--chart-4: oklch(0.828 0.189 84.429);
170+
--chart-5: oklch(0.769 0.188 70.08);
171+
--sidebar: oklch(0.985 0 0);
172+
--sidebar-foreground: oklch(0.145 0 0);
173+
--sidebar-primary: oklch(0.205 0 0);
174+
--sidebar-primary-foreground: oklch(0.985 0 0);
175+
--sidebar-accent: oklch(0.97 0 0);
176+
--sidebar-accent-foreground: oklch(0.205 0 0);
177+
--sidebar-border: oklch(0.922 0 0);
178+
--sidebar-ring: oklch(0.708 0 0);
179+
}
180+
181+
.dark {
182+
--background: oklch(0.145 0 0);
183+
--foreground: oklch(0.985 0 0);
184+
--card: oklch(0.205 0 0);
185+
--card-foreground: oklch(0.985 0 0);
186+
--popover: oklch(0.205 0 0);
187+
--popover-foreground: oklch(0.985 0 0);
188+
--primary: oklch(0.922 0 0);
189+
--primary-foreground: oklch(0.205 0 0);
190+
--secondary: oklch(0.269 0 0);
191+
--secondary-foreground: oklch(0.985 0 0);
192+
--muted: oklch(0.269 0 0);
193+
--muted-foreground: oklch(0.708 0 0);
194+
--accent: oklch(0.269 0 0);
195+
--accent-foreground: oklch(0.985 0 0);
196+
--destructive: oklch(0.704 0.191 22.216);
197+
--border: oklch(1 0 0 / 10%);
198+
--input: oklch(1 0 0 / 15%);
199+
--ring: oklch(0.556 0 0);
200+
--chart-1: oklch(0.488 0.243 264.376);
201+
--chart-2: oklch(0.696 0.17 162.48);
202+
--chart-3: oklch(0.769 0.188 70.08);
203+
--chart-4: oklch(0.627 0.265 303.9);
204+
--chart-5: oklch(0.645 0.246 16.439);
205+
--sidebar: oklch(0.205 0 0);
206+
--sidebar-foreground: oklch(0.985 0 0);
207+
--sidebar-primary: oklch(0.488 0.243 264.376);
208+
--sidebar-primary-foreground: oklch(0.985 0 0);
209+
--sidebar-accent: oklch(0.269 0 0);
210+
--sidebar-accent-foreground: oklch(0.985 0 0);
211+
--sidebar-border: oklch(1 0 0 / 10%);
212+
--sidebar-ring: oklch(0.556 0 0);
213+
}
214+
215+
@layer base {
216+
* {
217+
@apply border-border outline-ring/50;
218+
}
219+
body {
220+
@apply bg-background text-foreground;
221+
}
222+
}

‎src/components/About/About.styles.tsx‎

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
"use client";
22
import styled from "styled-components";
3-
import Link from "next/link";
43

54
export const Wrapper = styled.div`
65
display: flex;
@@ -52,19 +51,3 @@ export const Subtitle = styled.p`
5251
font-size: 0.9rem;
5352
}
5453
`;
55-
56-
export const Button = styled(Link)`
57-
text-decoration: none;
58-
border: 1px solid ${({ theme }) => theme.colors.green}80;
59-
padding: 0.5rem 1.5rem;
60-
color: ${({ theme }) => theme.colors.green};
61-
border-radius: 4px;
62-
transition: 300ms;
63-
cursor: not-allowed;
64-
font-size: 0.8rem;
65-
66-
&:hover {
67-
background-color: ${({ theme }) => theme.colors.green}90;
68-
color: white;
69-
}
70-
`;

‎src/components/About/About.tsx‎

Lines changed: 3 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
1-
import {
2-
Button,
3-
ContentWrapper,
4-
Subtitle,
5-
Title,
6-
Wrapper,
7-
} from "./About.styles";
1+
import { LinkButton } from "../LinkButton/LinkButton";
2+
import { ContentWrapper, Subtitle, Title, Wrapper } from "./About.styles";
83

94
export const AboutSection = ({ header }: { header: { fields: any } }) => {
105
const { id, title, subtitle } = header.fields;
@@ -14,7 +9,7 @@ export const AboutSection = ({ header }: { header: { fields: any } }) => {
149
<ContentWrapper>
1510
<Title>{title}</Title>
1611
<Subtitle>{subtitle}</Subtitle>
17-
<Button href="#">Saiba mais</Button>
12+
<LinkButton href="/">Saiba mais</LinkButton>
1813
</ContentWrapper>
1914
</Wrapper>
2015
);

‎src/components/LinkButton/LinkButton.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
import { Button } from "@/components/ui/button";
2+
import Link from "next/link";
3+
import { ReactNode } from "react";
4+
5+
export const LinkButton = ({
6+
href,
7+
children,
8+
variant = "primary",
9+
className = "",
10+
}: {
11+
href: string;
12+
children: ReactNode;
13+
variant?: "primary" | "secondary";
14+
className?: string;
15+
}) => {
16+
return (
17+
<Button
18+
asChild
19+
variant={variant}
20+
className={`w-full md:w-auto ${className}`}
21+
>
22+
<Link href={href}>{children}</Link>
23+
</Button>
24+
);
25+
};

0 commit comments

Comments
 (0)