cx/commerce
4
0
Fork 0
forked from crowetic/commerce
Code Pull Requests Activity

Changes to BLog

Browse Source
This commit is contained in:
Belen Curcio 2020-10-13 09:52:18 -03:00
parent 2ad115af61
commit 7efda91b11
5 changed files with 82 additions and 71 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
components/cart/CartSidebarView/CartSidebarView.tsx
View File

@ -11,14 +11,18 @@ import useOpenCheckout from '@lib/bigcommerce/cart/use-open-checkout'
const CartSidebarView: FC = () => { const CartSidebarView: FC = () => {
const { data, isEmpty } = useCart() const { data, isEmpty } = useCart()
const { price: subTotal } = usePrice(data && { const { price: subTotal } = usePrice(
amount: data.base_amount, data && {
currencyCode: data.currency.code, amount: data.base_amount,
}) currencyCode: data.currency.code,
const { price: total } = usePrice(data && { }
amount: data.cart_amount, )
currencyCode: data.currency.code, const { price: total } = usePrice(
}) data && {
amount: data.cart_amount,
currencyCode: data.currency.code,
}
)
const openCheckout = useOpenCheckout() const openCheckout = useOpenCheckout()
const { closeSidebar } = useUI() const { closeSidebar } = useUI()
const handleClose = () => closeSidebar() const handleClose = () => closeSidebar()
@ -87,7 +91,7 @@ const CartSidebarView: FC = () => {
) : ( ) : (
<> <>
<div className="px-4 sm:px-6 flex-1"> <div className="px-4 sm:px-6 flex-1">
<h2 className="pt-1 pb-4 text-lg leading-7 font-medium text-gray-900 uppercase"> <h2 className="pt-1 pb-4 text-2xl leading-7 font-bold text-primary tracking-wide">
My Cart My Cart
</h2> </h2>
<ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200"> <ul className="py-6 space-y-6 sm:py-0 sm:space-y-0 sm:divide-y sm:divide-gray-200 border-t border-gray-200">

2
components/core/Searchbar/Searchbar.tsx
View File

@ -17,7 +17,7 @@ const Searchbar: FC<Props> = ({ className }) => {
return ( return (
<div <div
className={cn( className={cn(
'relative rounded-lg text-sm bg-accent-1 text-gray-600 w-full', 'relative rounded-lg text-sm bg-accent-2 text-gray-600 w-full',
className className
)} )}
> >

2
components/ui/Container/Container.tsx
View File

@ -8,7 +8,7 @@ interface Props {
} }
const Container: FC<Props> = ({ children, className, el = 'div' }) => { const Container: FC<Props> = ({ children, className, el = 'div' }) => {
const rootClassName = cn('mx-auto max-w-screen-xl', className) const rootClassName = cn('mx-auto max-w-7xl', className)
let Component: React.ComponentType<React.HTMLAttributes< let Component: React.ComponentType<React.HTMLAttributes<
HTMLDivElement HTMLDivElement

126
pages/blog.tsx
View File

@ -1,5 +1,6 @@
import { GetStaticPropsContext, InferGetStaticPropsType } from 'next' import { GetStaticPropsContext, InferGetStaticPropsType } from 'next'
import { Layout } from '@components/core' import { Layout } from '@components/core'
import { Container } from '@components/ui'
export async function getStaticProps({ preview }: GetStaticPropsContext) { export async function getStaticProps({ preview }: GetStaticPropsContext) {
return { return {
@ -13,71 +14,76 @@ export default function Blog({}: InferGetStaticPropsType<
return ( return (
<div className="pb-20"> <div className="pb-20">
<div className="text-center pt-40 pb-56 bg-violet"> <div className="text-center pt-40 pb-56 bg-violet">
<h2 className="text-4xl tracking-tight leading-10 font-extrabold text-white sm:text-5xl sm:leading-none md:text-6xl"> <Container>
Welcome to Acme, the simplest way to start publishing with Next.js <h2 className="text-4xl tracking-tight leading-10 font-extrabold text-white sm:text-5xl sm:leading-none md:text-6xl">
</h2> Welcome to Acme, the simplest way to start publishing with Next.js
<p className="mt-3 max-w-md mx-auto text-base text-gray-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl"> </h2>
The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the <p className="mt-3 max-w-md mx-auto text-gray-100 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
‘Carbon’ iteration, and now release details have been locked in for The Yeezy BOOST 350 V2 lineup continues to grow. We recently had the
this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the ‘Carbon’ iteration, and now release details have been locked in for
shoe was originally called ‘Abez’, which translated to ‘Tin’ in this ‘Natural’ joint. Revealed by Yeezy Mafia earlier this year, the
Hebrew. It’s now undergone a name change, and will be referred to as shoe was originally called ‘Abez’, which translated to ‘Tin’ in
‘Natura` Hebrew. It’s now undergone a name change, and will be referred to as
</p> ‘Natura`
<div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-12"> </p>
<div className="flex"> <div className="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-12">
<div className="flex-shrink-0 inline-flex rounded-full border-2 border-white"> <div className="flex">
<img <div className="flex-shrink-0 inline-flex rounded-full border-2 border-white">
className="h-12 w-12 rounded-full" <img
src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204" className="h-12 w-12 rounded-full"
alt="" src="https://vercel.com/api/www/avatar/61182a9f6bda512b4d9263c9c8a60aabe0402f4c?s=204"
/> alt=""
</div> />
<div className="ml-4">
<div className="text-base leading-6 font-medium text-white">
José Rodriguez
</div> </div>
<div className="text-base leading-6 font-medium text-gray-200"> <div className="ml-4">
CEO, Acme <div className="leading-6 font-medium text-white">
José Rodriguez
</div>
<div className="leading-6 font-medium text-gray-200">
CEO, Acme
</div>
</div> </div>
</div> </div>
</div> </div>
</Container>
</div>
<Container>
<div className="-mt-96 mx-auto">
<img src="/jacket.png" />
</div> </div>
</div> <div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto">
<div className=" -mt-96"> <p className="py-6">
<img src="/jacket.png" /> Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake.
</div> Candy canes bonbon dragée jujubes chocolate bar. Cotton candy gummi
<div className="text-lg leading-7 font-medium py-6 text-justify max-w-6xl mx-auto"> bears toffee cake muffin caramels. Gummi bears danish liquorice ice
<p className="py-6"> cream pie chocolate cake lemon drops tootsie roll tart. Biscuit
Biscuit oat cake wafer icing ice cream tiramisu pudding cupcake. Candy gingerbread fruitcake cake powder pudding cotton candy chocolate
canes bonbon dragée jujubes chocolate bar. Cotton candy gummi bears bar. Sweet donut marshmallow powder gummies jelly tart powder.
toffee cake muffin caramels. Gummi bears danish liquorice ice cream Cheesecake bonbon caramels cupcake jujubes halvah donut dessert
pie chocolate cake lemon drops tootsie roll tart. Biscuit gingerbread chocolate bar. Jelly gummies liquorice lollipop chocolate bar
fruitcake cake powder pudding cotton candy chocolate bar. Sweet donut chocolate cake sugar plum. Lollipop toffee dragée chocolate bar
marshmallow powder gummies jelly tart powder. Cheesecake bonbon jelly beans biscuit. Halvah danish cheesecake. Tiramisu donut
caramels cupcake jujubes halvah donut dessert chocolate bar. Jelly lollipop pie donut caramels tiramisu. Jujubes candy canes pudding
gummies liquorice lollipop chocolate bar chocolate cake sugar plum. danish fruitcake chupa chups jujubes carrot cake bonbon. Halvah
Lollipop toffee dragée chocolate bar jelly beans biscuit. Halvah donut jelly halvah bonbon.
danish cheesecake. Tiramisu donut lollipop pie donut caramels </p>
tiramisu. Jujubes candy canes pudding danish fruitcake chupa chups <p className="py-6">
jujubes carrot cake bonbon. Halvah donut jelly halvah bonbon. Biscuit sugar plum sweet chocolate cake sesame snaps soufflé
</p> topping. Gummies topping bonbon chocolate pudding cookie. Wafer
<p className="py-6"> icing cake pastry. Gummies candy dessert chupa chups lemon drops.
Biscuit sugar plum sweet chocolate cake sesame snaps soufflé topping. Soufflé marshmallow oat cake chocolate jelly-o caramels pie marzipan
Gummies topping bonbon chocolate pudding cookie. Wafer icing cake jelly beans. Cheesecake liquorice donut jujubes halvah ice cream
pastry. Gummies candy dessert chupa chups lemon drops. Soufflé cotton candy cupcake sugar plum. Ice cream ice cream sweet roll
marshmallow oat cake chocolate jelly-o caramels pie marzipan jelly fruitcake icing. Muffin candy canes bonbon croissant gummies lemon
beans. Cheesecake liquorice donut jujubes halvah ice cream cotton drops pie danish. Oat cake chocolate toffee cake jelly tart
candy cupcake sugar plum. Ice cream ice cream sweet roll fruitcake caramels. Sweet donut cheesecake pastry pie sweet. Bonbon lollipop
icing. Muffin candy canes bonbon croissant gummies lemon drops pie brownie. Soufflé pudding macaroon cotton candy gingerbread. Biscuit
danish. Oat cake chocolate toffee cake jelly tart caramels. Sweet macaroon gummi bears candy canes chocolate cake lemon drops
donut cheesecake pastry pie sweet. Bonbon lollipop brownie. Soufflé marshmallow. Chocolate cake cotton candy marshmallow cake sweet
pudding macaroon cotton candy gingerbread. Biscuit macaroon gummi tootsie roll bonbon carrot cake sugar plum.
bears candy canes chocolate cake lemon drops marshmallow. Chocolate </p>
cake cotton candy marshmallow cake sweet tootsie roll bonbon carrot </div>
cake sugar plum. </Container>
</p>
</div>
</div> </div>
) )
} }

1
tailwind.config.js
View File

@ -12,6 +12,7 @@ module.exports = {
extend: { extend: {
colors: { colors: {
'accent-1': '#FAFAFA', 'accent-1': '#FAFAFA',
'accent-2': '#F1F3F5',
'accent-4': '#888', 'accent-4': '#888',
violet: '#7928CA', violet: '#7928CA',
pink: '#FF0080', pink: '#FF0080',