Skip to content

Commit

Permalink
v1
Browse files Browse the repository at this point in the history
  • Loading branch information
@Nutlope
Nutlope committed Jan 14, 2023
1 parent 809c372 commit 40387d9
Show file tree
Hide file tree
Showing 18 changed files with 4,515 additions and 693 deletions.
4 changes: 4 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,3 +25,7 @@ pnpm create next-app --example with-tailwindcss with-tailwindcss-app
```

Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)).

Make coming soon page with

Maybe add "Job" to another dropdown
132 changes: 132 additions & 0 deletions components/DropDown.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
import * as PopoverPrimitive from "@radix-ui/react-popover";
import { AnimatePresence, motion, useAnimation } from "framer-motion";
import { ChevronDown } from "lucide-react";
import { useRef } from "react";

// TODO: Refactor this component to re-use things
export default function DropDown({
align = "start",
openPopover,
setOpenPopover,
}: {
align?: "center" | "start" | "end";
openPopover: boolean;
setOpenPopover: (open: boolean) => void;
}) {
const mobileTooltipRef = useRef<HTMLDivElement>(null);
const controls = useAnimation();
const transitionProps = { type: "spring", stiffness: 500, damping: 30 };

async function handleDragEnd(_: any, info: any) {
const offset = info.offset.y;
const velocity = info.velocity.y;
const height =
mobileTooltipRef.current?.getBoundingClientRect().height || 0;
if (offset > height / 2 || velocity > 800) {
await controls.start({ y: "100%", transition: transitionProps });
setOpenPopover(false);
} else {
controls.start({ y: 0, transition: transitionProps });
}
}
return (
<>
<div className="md:hidden">
<button
onClick={() => setOpenPopover(!openPopover)}
className="flex w-40 items-center justify-between rounded-md border border-gray-300 px-4 py-2 transition-all duration-75 hover:border-gray-800 focus:outline-none active:bg-gray-100"
>
<p className="text-gray-600">Professional Vibe</p>
<ChevronDown
className={`h-4 w-4 text-gray-600 transition-all ${
openPopover ? "rotate-180" : ""
}`}
/>
</button>
</div>
<AnimatePresence>
{openPopover && (
<>
<motion.div
ref={mobileTooltipRef}
key="mobile-tooltip"
className="group fixed inset-x-0 bottom-0 z-40 w-screen cursor-grab active:cursor-grabbing md:hidden"
initial={{ y: "100%" }}
animate={{
y: openPopover ? 0 : "100%",
transition: transitionProps,
}}
exit={{ y: "100%" }}
transition={transitionProps}
drag="y"
dragDirectionLock
onDragEnd={handleDragEnd}
dragElastic={{ top: 0, bottom: 1 }}
dragConstraints={{ top: 0, bottom: 0 }}
>
<div
className={`rounded-t-4xl -mb-1 flex h-7 w-full items-center justify-center border-t border-gray-200 bg-white`}
>
<div className="-mr-1 h-1 w-6 rounded-full bg-gray-300 transition-all group-active:rotate-12" />
<div className="h-1 w-6 rounded-full bg-gray-300 transition-all group-active:-rotate-12" />
</div>
<div className="flex min-h-[150px] w-full items-center justify-center overflow-hidden bg-white align-middle shadow-xl">
<div className="w-full rounded-md bg-white p-2 sm:w-40">
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Item 1
</button>
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Item 2
</button>
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Item 3
</button>
</div>
</div>
</motion.div>
<motion.div
key="mobile-tooltip-backdrop"
className="fixed inset-0 z-30 bg-gray-100 bg-opacity-10 backdrop-blur md:hidden"
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
onClick={() => setOpenPopover(false)}
/>
</>
)}
</AnimatePresence>
<PopoverPrimitive.Root>
<PopoverPrimitive.Trigger className="hidden md:flex" asChild>
<button
onClick={() => setOpenPopover(!openPopover)}
className="flex w-full items-center justify-between rounded-md border border-gray-300 px-4 py-2 transition-all duration-75 hover:border-gray-800 focus:outline-none active:bg-gray-100"
>
<p className="text-gray-600">Professional Vibe</p>
<ChevronDown
className={`h-4 w-4 text-gray-600 transition-all ${
openPopover ? "rotate-180" : ""
}`}
/>
</button>
</PopoverPrimitive.Trigger>
<PopoverPrimitive.Content
sideOffset={4}
align={align}
className="z-20 hidden animate-slide-up-fade items-center rounded-md border border-gray-200 bg-white shadow-md md:block w-full"
>
<div className="w-full rounded-md bg-white p-2">
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Professional Vibe
</button>
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Funny Vibe
</button>
<button className="relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 active:bg-gray-200">
Sad Vibe
</button>
</div>
</PopoverPrimitive.Content>
</PopoverPrimitive.Root>
</>
);
}
54 changes: 54 additions & 0 deletions components/Footer.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
import Link from "next/link";

export default function Footer() {
return (
<footer className="text-center h-16 sm:h-20 w-full sm:pt-2 pt-4 border-t mt-5 flex sm:flex-row flex-col justify-between items-center px-3 space-y-3 sm:mb-0 mb-3">
<div>
Powered by{" "}
<a
href="https://replicate.com/"
target="_blank"
rel="noreferrer"
className="font-bold hover:underline transition underline-offset-2"
>
Next.js{" "}
</a>
and{" "}
<a
href="https://vercel.com/"
target="_blank"
rel="noreferrer"
className="font-bold hover:underline transition underline-offset-2"
>
Vercel Edge Functions.
</a>
</div>
<div className="flex space-x-4 pb-4 sm:pb-0">
<Link
href="https://twitter.com/nutlope"
className="group"
aria-label="TaxPal on Twitter"
>
<svg
aria-hidden="true"
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
>
<path d="M8.29 20.251c7.547 0 11.675-6.253 11.675-11.675 0-.178 0-.355-.012-.53A8.348 8.348 0 0 0 22 5.92a8.19 8.19 0 0 1-2.357.646 4.118 4.118 0 0 0 1.804-2.27 8.224 8.224 0 0 1-2.605.996 4.107 4.107 0 0 0-6.993 3.743 11.65 11.65 0 0 1-8.457-4.287 4.106 4.106 0 0 0 1.27 5.477A4.073 4.073 0 0 1 2.8 9.713v.052a4.105 4.105 0 0 0 3.292 4.022 4.093 4.093 0 0 1-1.853.07 4.108 4.108 0 0 0 3.834 2.85A8.233 8.233 0 0 1 2 18.407a11.615 11.615 0 0 0 6.29 1.84" />
</svg>
</Link>
<Link
href="https://github.com/Nutlope/restorePhotos"
className="group"
aria-label="TaxPal on GitHub"
>
<svg
aria-hidden="true"
className="h-6 w-6 fill-slate-500 group-hover:fill-slate-700"
>
<path d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0 1 12 6.844a9.59 9.59 0 0 1 2.504.337c1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.02 10.02 0 0 0 22 12.017C22 6.484 17.522 2 12 2Z" />
</svg>
</Link>
</div>
</footer>
);
}
30 changes: 30 additions & 0 deletions components/Header.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
import Image from "next/image";
import Link from "next/link";

export default function Header() {
return (
<header className="flex justify-between items-center w-full mt-5 border-b-2 pb-7 sm:px-4 px-2">
<Link href="/" className="flex space-x-3">
<Image
alt="header text"
src="/writingIcon2.png"
className="sm:w-12 sm:h-12 w-8 h-8"
width={32}
height={32}
/>
<h1 className="sm:text-4xl text-2xl font-bold ml-2 tracking-tight">
twitterBio.com
</h1>
</Link>
<a href="https://vercel.ai" target="_blank" rel="noreferrer">
<Image
alt="Vercel Icon"
src="/vercelLogo.png"
className="sm:w-8 sm:h-[27px] w-8 h-[28px]"
width={32}
height={28}
/>
</a>
</header>
);
}
Loading

0 comments on commit 40387d9

Please sign in to comment.