Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: smol tweaks to framegear #145

Merged
merged 3 commits into from
Feb 19, 2024
Merged

chore: smol tweaks to framegear #145

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
1d684b2
fix: forgot to implement input
cnasc Feb 18, 2024
2e904c2
chore: install radix icons
cnasc Feb 18, 2024
67bc801
chore: use radix icon from figma
cnasc Feb 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
17 changes: 13 additions & 4 deletions framegear/components/Frame/Frame.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,10 +41,19 @@ function ValidFrame({ tags }: { tags: Record<string, string> }) {
<div>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img className={`w-full rounded-t-xl aspect-[${imageAspectRatio}]`} src={image} alt="" />
<div className="bg-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
{buttons.map((button) =>
button ? <FrameButton key={button.key}>{button.value}</FrameButton> : null,
<div className="bg-content-light flex flex-col gap-2 rounded-b-xl px-4 py-2">
{!!input && (
<input
className="bg-input-light border-light rounded-lg border p-2 text-black"
type="text"
placeholder={input}
/>
)}
<div className="flex flex-wrap gap-4">
{buttons.map((button) =>
button ? <FrameButton key={button.key}>{button.value}</FrameButton> : null,
)}
</div>
</div>
</div>
);
Expand All @@ -61,7 +70,7 @@ function PlaceholderFrame() {
return (
<div className="flex flex-col">
<div className="bg-farcaster flex aspect-[1.91/1] w-full rounded-t-xl"></div>
<div className="bg-button flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
<div className="bg-content-light flex flex-wrap gap-2 rounded-b-xl px-4 py-2">
<FrameButton>Get Started</FrameButton>
</div>
</div>
Expand Down
16 changes: 3 additions & 13 deletions framegear/components/Header/Header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { APP_NAME } from '@/utils/constants';
import { ArrowTopRightIcon } from '@radix-ui/react-icons';
import Link from 'next/link';

export function Header() {
Expand Down Expand Up @@ -27,10 +28,10 @@ function Banner() {
</section>
</div>
<Link
className="bg-link-button flex items-center gap-2 rounded-full px-4 py-2"
className="bg-link-button flex items-center gap-1 rounded-full px-4 py-2"
href="https://docs.farcaster.xyz/reference/frames/spec"
>
<span>Farcaster Frames specs</span> {LINK_OUT_ICON}
<span>Farcaster Frames specs</span> <ArrowTopRightIcon />
</Link>
</div>
);
Expand All @@ -41,14 +42,3 @@ function AppName({ className: additionalClasses = '' }: { className?: string })
<span className={`rounded-lg bg-slate-800 p-1 font-mono ${additionalClasses}`}>{APP_NAME}</span>
);
}

const LINK_OUT_ICON = (
<svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
d="M3 2C2.44772 2 2 2.44772 2 3V12C2 12.5523 2.44772 13 3 13H12C12.5523 13 13 12.5523 13 12V8.5C13 8.22386 12.7761 8 12.5 8C12.2239 8 12 8.22386 12 8.5V12H3V3L6.5 3C6.77614 3 7 2.77614 7 2.5C7 2.22386 6.77614 2 6.5 2H3ZM12.8536 2.14645C12.9015 2.19439 12.9377 2.24964 12.9621 2.30861C12.9861 2.36669 12.9996 2.4303 13 2.497L13 2.5V2.50049V5.5C13 5.77614 12.7761 6 12.5 6C12.2239 6 12 5.77614 12 5.5V3.70711L6.85355 8.85355C6.65829 9.04882 6.34171 9.04882 6.14645 8.85355C5.95118 8.65829 5.95118 8.34171 6.14645 8.14645L11.2929 3H9.5C9.22386 3 9 2.77614 9 2.5C9 2.22386 9.22386 2 9.5 2H12.4999H12.5C12.5678 2 12.6324 2.01349 12.6914 2.03794C12.7504 2.06234 12.8056 2.09851 12.8536 2.14645Z"
fill="currentColor"
fillRule="evenodd"
clipRule="evenodd"
></path>
</svg>
);
1 change: 1 addition & 0 deletions framegear/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@
"test": "jest"
},
"dependencies": {
"@radix-ui/react-icons": "^1.3.0",
"jotai": "^2.6.4",
"next": "14.1.0",
"react": "^18",
Expand Down
4 changes: 3 additions & 1 deletion framegear/tailwind.config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,14 +7,16 @@ const config: Config = {
backgroundColor: {
content: '#27282B',
banner: '#141519',
button: '#f3f3f3',
'content-light': '#f3f3f3',
farcaster: '#855DCD',
input: '#191918',
'input-light': '#DBDBDB',
'link-button': '#2E3137',
},
borderColor: {
button: '#cfd0d2',
'pallette-line': 'rgba(138, 145, 158, 0.20)',
light: '#CFD0D2',
},
maxWidth: {
'layout-max': '1280px',
Expand Down
10 changes: 10 additions & 0 deletions framegear/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -965,6 +965,15 @@ __metadata:
languageName: node
linkType: hard

"@radix-ui/react-icons@npm:^1.3.0":
version: 1.3.0
resolution: "@radix-ui/react-icons@npm:1.3.0"
peerDependencies:
react: ^16.x || ^17.x || ^18.x
checksum: 581657680e43fd13ff06e01f963e3afa94671d4ce6c3fb126e2c70c993ab8650faa55286974032dbccfecca4db57308fb66d53771d765887e03600cddee84ae5
languageName: node
linkType: hard

"@rushstack/eslint-patch@npm:^1.3.3":
version: 1.7.2
resolution: "@rushstack/eslint-patch@npm:1.7.2"
Expand Down Expand Up @@ -3170,6 +3179,7 @@ __metadata:
version: 0.0.0-use.local
resolution: "framegear@workspace:."
dependencies:
"@radix-ui/react-icons": "npm:^1.3.0"
"@testing-library/jest-dom": "npm:^6.4.2"
"@testing-library/react": "npm:^14.2.1"
"@types/node": "npm:^20"
Expand Down
Loading